HTML DOM 요소 appendChild()
예
목록에 항목 추가:
const node = document.createElement("LI");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
전에:
- Coffee
- Tea
후에:
- Coffee
- Tea
- Water
한 목록에서 다른 목록으로 항목 이동:
const node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
전에:
- Coffee
- Tea
- Water
- Milk
후에:
- Coffee
- Tea
- Milk
- Water
아래에 더 많은 예가 있습니다.
정의 및 사용
이 appendChild()메서드는 노드를 노드의 마지막 자식으로 추가합니다.
팁: 텍스트를 사용하여 새 단락을 생성하려면 단락에 추가하는 텍스트 노드로 텍스트를 생성한 다음 문서에 단락을 추가하는 것을 기억 하십시오 .
이 방법을 사용하여 한 요소에서 다른 요소로 요소를 이동할 수도 있습니다("추가 예" 참조).
통사론
node.appendChild(node)
매개변수
| Parameter | Description |
| node | Required. The node to append. |
반환 값
| 유형 | 설명 |
| 마디 | 추가된 노드 |
더 많은 예
<p> 요소를 만들고 <div> 요소에 추가합니다.
const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
<p> 요소를 만들고 문서 본문에 추가합니다.
const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);
관련 요소 방법:
관련 문서 방법:
브라우저 지원
element.appendChild()DOM 레벨 1(1998) 기능입니다.
모든 브라우저에서 완벽하게 지원됩니다.
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |