<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 속성을 사용합니다.
텍스트가 있는 버튼을 생성합니다.
<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>
createElement() 메서드는 지정된 이름을 가진 요소 노드를 만듭니다.
Tip: 요소가 생성된 후 element.appendChild() 또는 element.insertBefore() 메서드를 사용하여 문서에 삽입합니다.
document.createElement(nodename)
| Parameter | Type | Description |
| nodename | String | 필수입니다. 생성하려는 요소의 이름 |
Return Value : 요소 객체이며, 생성된 객체 노드를 나타냅니다
텍스트가 있는 <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>
<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>