wiki:html:html_note:html_dom_appendchild_method
목차
HTML DOM appendChild() Method
- description : HTML DOM appendChild() Method
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-06-03
Source of the article
Example
목록(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:
- Coffee
- Tea
After appending:
- Coffee
- Tea
- Water
Definition and Usage
appendChild() 메서드는 하나의 노드를 노드의 마지막 자식으로 추가합니다.
Tip: 텍스트가 있는 새 단락(paragraph)을 만들려면, 단락에 추가하는 텍스트 노드로 텍스트를 만든 다음, 문서에 단락을 추가해야 합니다.
이 메서드를 사용하여 한 요소에서 다른 요소로 요소를 이동할 수도 있습니다 (“추가 예제”참조).
Tip: insertBefore() 메서드를 사용하여 지정된 기존 자식 노드 앞에 새 자식 노드를 삽입합니다.
Syntax
node.appendChild(node)
Parameter Values
| Parameter | Type | Description |
|---|---|---|
| node | Node Object | 필수입니다. 첨부하려는 노드 객체입니다. |
Technical Details
Return Value: 첨부된 노드를 나타내는 노드 객체
More Examples
목록 항목(list item)을 한 목록에서 다른 목록으로 이동:
Before appending:
- Coffee
- Tea
- Water
- Milk
After appending:
- Coffee
- Tea
- Milk
- Water
<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>
Example
<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>
Example
일부 텍스트가 포함된 <p> 요소를 만들고, 그 요소를 문서 본문(body) 끝에 추가합니다.
/volume1/web/dokuwiki/data/pages/wiki/html/html_note/html_dom_appendchild_method.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
