HTML DOM appendChild() 메서드는 자식 노드 목록의 끝에 텍스트 노드를 만들고 추가하는 데 사용됩니다. appendChild() 메서드를 사용하여 현재 위치에서 새 위치로 요소를 이동할 수도 있습니다. appendChild()를 사용하여 목록에 새 값을 추가하고 다른 단락 아래에 새 단락을 추가할 수도 있습니다.
구문
다음은 appendChild() 메서드의 구문입니다 -
node.appendChild( node )
여기서 매개변수 노드는 추가하려는 개체입니다. 필수 매개변수 값입니다.
예시
appendChild() 메서드의 예를 살펴보겠습니다. -
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a paragraph and append it to the div</p>
<div id="SampleDIV">
A DIV element
</div>
<button onclick="AppendP()">Append</button>
<script>
var x=1;
function AppendP() {
var paragraph = document.createElement("P");
paragraph.innerHTML = "This is paragraph "+x;
document.getElementById("SampleDIV").appendChild(paragraph);
x++;
}
</script>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
추가를 3번 클릭한 후:−
위의 예에서 -
ID가 "SampleDIV"인 div를 만들었습니다. 추가된 노드는 이 div의 자식으로 작동합니다.
<div id="SampleDIV"> A DIV element </div>
그런 다음 AppendP()
기능을 실행하는 "Append"라는 버튼이 있습니다.<button onclick="AppendP()">Append</button>
AppendP() 함수는 먼저 단락(p) 요소를 생성하고 이를 가변 단락에 할당합니다. 그런 다음 innerHTML을 사용하여 일부 텍스트가 단락에 추가되고 변수 x가 텍스트에 추가됩니다. 이 변수는 "추가" 버튼을 클릭할 때마다 증가합니다. 마지막으로 새로 생성된 단락을 div 요소의 자식 노드로 추가합니다 -
var x=1;
function AppendP() {
var paragraph = document.createElement("P");
paragraph.innerHTML = "This is paragraph "+x;
document.getElementById("SampleDIV").appendChild(paragraph);
x++;
}