wiki:javascript:javascript_note:createelement
목차
Javascript HTML DOM createElement() Method
- description : Javascript HTML DOM createElement() Method
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-06-03
The source of the article
Example
<button> 요소를 생성합니다.
<body> <p>Click the button to make a BUTTON element.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var btn = document.createElement("BUTTON"); document.body.appendChild(btn); } </script> </body>
HTML 요소에는 종종 텍스트가 포함됩니다. 텍스트가 있는 버튼을 만들려면, 요소 객체의 innerText 또는 innerHTML 속성을 사용합니다.
Example
텍스트가 있는 버튼을 생성합니다.
<body> <p>Click the buton to make a BUTTON element with text.</p> <button onclick="myFunction()">Try it</button> <!-- 버튼을 클릭하면 CLICK ME 버튼이 생겨남 --> <script> function myFunction() { var btn = document.createElement("BUTTON"); btn.innerHTML = "CLICK ME" document.body.appendChild(btn); } </script> </body>
Definition and Usage
createElement() 메서드는 지정된 이름을 가진 요소 노드를 만듭니다.
Tip: 요소가 생성된 후 element.appendChild() 또는 element.insertBefore() 메서드를 사용하여 문서에 삽입합니다.
Syntax
document.createElement(nodename)
Parameter Values
| Parameter | Type | Description |
| nodename | String | 필수입니다. 생성하려는 요소의 이름 |
Technical Details
Return Value : 요소 객체이며, 생성된 객체 노드를 나타냅니다
More Examples
Example
텍스트가 있는 <p> 요소를 만들고, innerText를 사용하여 텍스트를 설정한 다음, 문서에 덧붙입니다.
<body> <p>Click the button to create a P element with some text.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var para = document.createElement("P");/* Create a <p> element */ para.innerText = "This is a paragraph.";/* Insert text */ document.body.appendChild(para); /* Append <p> to <body> */ /* 버튼 아래에 This is a paragraph.가 생성됨 */ } </script> </body>
Example
<p> 요소를 생성하여 <div> 요소에 덧붙입니다.
<head> <style> #myDIV { border: 1px solid #000; margin-bottom: 10px; } </style> </head> <body> <p>Click the button to create a P element with some text, and append it to DIV.</p> <div id="myDIV"> A DIV element </div> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var para = document.createElement("P"); /* Create a <p> element */ para.innerHTML = "This is a paragraph.";/* Insert text */ document.getElementById("myDIV").appendChild(para);/* Append <p> to <div> with id="myDIV" */ } </script> </body>
/volume1/web/dokuwiki/data/pages/wiki/javascript/javascript_note/createelement.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
