[DOM_Element] JS - appendChild() 메서드 - 요소에 마지막 자식요소생성 (= 마지막 자식요소추가 = appendChild메서드 = 어펜드차일드메서드) ※자식요소 자동생성

appendChild() 예제

 

<ul id="code">

  <li>HTML</li>

  <li>CSS</li>

</ul>

<button onclick="hz()">클릭</button>

<script>

function hz() {

  var node = document.createElement("LI"); // 요소 생성

  var textnode = document.createTextNode("JS"); // 내용 생성

  node.appendChild(textnode); // 요소에 내용 결합

  document.getElementById("code").appendChild(node); // 기존요소에 생성요소 결합

}

</script>

 

결과보기 

appendChild() 정의

 

1.

아래 용도로 사용 가능
① 노드를 어떤 노드의 마지막 자식으로 추가.
② 어떤 요소를 한 요소에서 다른 요소로 이동시킬 때도 사용.

② 어떤 요소에 텍스트 추가할 때 사용

2.
텍스트 가진 단락을 문서에 추가하려면 먼저 text 생성 노드 이용해 text 생성 필요.
text 생성해 단락에 붙인 다음, 그 단락을 문서에 추가.

 

3.

노드를 어떤 노드의 첫 자식으로 추가하려면 아래 코드 이용.
insertBefore()

 

5.
주요 최신 브라우저 모두 지원.

 

※ 노드 (Node) : 네트워크에서 연결 포인트 혹은 데이터 전송의 종점 혹은 재분배점

appendChild() 구문

 

node1.appendChild(node2)

 

 

[매개변수]

node2

필수. 부착할 자식 노드 객체. (예) <li>JS</li>

 

 

cf.
node1
자식노드인 node2가 추가되는 부모 요소 (예) <ul id="code"> ~ </ul>

 

appendChild() 예제1 - 자식요소 이동

 

<ul id="code1"><li>HTML</li><li>CSS</li></ul>

<ul id="code2"><li>PHP</li><li>SQL</li><li>JS</li></ul>

<button onclick="hz()">클릭</button>

<script>

function hz() {

  var node = document.getElementById("code2").lastChild;

  document.getElementById("code1").appendChild(node);

}

</script>

 

결과보기

※ code2의 마지막 자식을 code1의 마지막 자식으로 이동

appendChild() 예제2 - 요소 생성 후 텍스트 추가. 생성요소를 다른요소 자식으로 추가

 

<style>

#box {

  border: 1px solid silver;

  margin-bottom: 10px;

}

</style>

<div id="box">

홈짱닷컴

</div>

<button onclick="hz()">클릭</button>

<script>

function hz() {

  var txt = document.createElement("P");

  txt.innerHTML = "Homzzang.com";

  document.getElementById("box").appendChild(txt);

}

</script>

 

결과보기

appendChild() 예제3 - 요소 생성 후 텍스트 추가. 생성요소를 body 태그에 바로 추가

 

<button onclick="hz()">클릭</button>

<script>

function hz() {

  var x = document.createElement("P");

  var t = document.createTextNode("홈짱닷컴 Homzzang.com");

  x.appendChild(t);

  document.body.appendChild(x);

}

</script>

 

appendChild() 예제 - 클래스 가진 자식요소 자동생성

 

<div class="grid-container">

</div>

<script>

// 아이템 1 ~ 16 생성

for (let i = 1; i <= 16; i++) {

  const div = document.createElement("div");

  div.textContent = i;

  div.classList.add(`item${i}`);

  document.querySelector(".grid-container").appendChild(div);

}

</script>

 

관련 메서드

 

element.hasChildNodes() - 자세히 보기

element.insertBefore()

element.removeChild()

element.replaceChild()

document.createElement()

document.createTextNode()

document.adoptNode()

document.importNode()