목록(list)에 항목(item)을 첨부합니다.
<body> <ul id="myList"> <li>Coffee</li> <li>Tea</li> </ul> <p>Click the button to append an item to the end of the list.</p> <button onclick="myFunction()">Try it</button> <P><strong>Note:</strong><br>First create an LI node,<br> then create a Textnode, <br> then append the Text node to the LI node. <br> Finally append the LI node to the list.</P> <script> function myFunction() { var node = document.createElement("LI"); /* First create an LI node, */ var textnode = document.createTextNode("Water"); /* then create a Textnode, */ node.appendChild(textnode); /* then append the Text node to the LI node. */ document.getElementById("myList").appendChild(node); /* Finally append the LI node to the list. */ } </script> </body>
Before appending:
After appending:
appendChild() 메서드는 하나의 노드를 노드의 마지막 자식으로 추가합니다.
Tip: 텍스트가 있는 새 단락(paragraph)을 만들려면, 단락에 추가하는 텍스트 노드로 텍스트를 만든 다음, 문서에 단락을 추가해야 합니다.
이 메서드를 사용하여 한 요소에서 다른 요소로 요소를 이동할 수도 있습니다 (“추가 예제”참조).
Tip: insertBefore() 메서드를 사용하여 지정된 기존 자식 노드 앞에 새 자식 노드를 삽입합니다.
node.appendChild(node)
| Parameter | Type | Description |
|---|---|---|
| node | Node Object | 필수입니다. 첨부하려는 노드 객체입니다. |
Return Value: 첨부된 노드를 나타내는 노드 객체
목록 항목(list item)을 한 목록에서 다른 목록으로 이동:
Before appending:
After appending:
<body> <ul id="myList1"> <li>Coffee</li> <li>Tea</li> </ul> <ul id="myList2"> <li>Water</li> <li>Milk</li> </ul> <p>Click the button to move an item from one list to another.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var node = document.getElementById("myList2").lastChild; /* myList2의 마지막 자식 요소 Milk를 변수 node에 대입 */ document.getElementById("myList1").appendChild(node); /* id=myList1을 불러오고, myList2의 마지막 자식 요소 Milk를 자식 요소에 첨가한다. */ } </script> </body>
<p> 요소를 만들고 <div> 요소에 추가합니다.
<style> #myDIV { border: 1px solid #000; margin-bottom: 10px; } </style> <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> <p><strong>Example explained:</strong><br>First create a P node,<br> then create a Text node,<br> then appendthe Text node to the P node. <br> Finally,get the DIV element with id="myDIV", and append the P node to DIV.</p> <script> function myFunction() { var para = document.createElement("P"); /* First create a P node */ var t = document.createTextNode("This is a paragraph.");/* then create a Text node */ para.appendChild(t); /* then append the Text node to the p node */ document.getElementById("myDIV").appendChild(para); /* Finally, get the DIV element with id="myDIV", and append the P node to DIV */ } </script> </body>
일부 텍스트가 포함된 <p> 요소를 만들고, 그 요소를 문서 본문(body) 끝에 추가합니다.