[DOM_Element] JS - cloneNode() 메서드 - 노드복사

cloneNode() 예제

 

<ul id="hz"><li>홈짱닷컴</li><li>Homzzang.com</li></ul>

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

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

<script>

function homzzang() {

  var item = document.getElementById("code").lastChild;

  var copy = item.cloneNode(true);

  document.getElementById("hz").appendChild(copy);

}

</script>

 

결과보기

주의: 아래처럼 리스트 관련 코드가 줄바꿈 되어 있는 경우, 정상작동 안 함.

 

<ul id="hz">

  <li>홈짱닷컴</li>

  <li>Homzzang.com</li>  

</ul>

<ul id="code">

  <li>HTML</li>

  <li>CSS</li>  

</ul>

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

<script>

function homzzang() {

  var item = document.getElementById("code").lastChild;

  var copy = item.cloneNode(true);

  document.getElementById("hz").appendChild(copy);

}

</script>

 

결과보기

에러 원인: 

 

1.

요소 안 공백은 text로 간주되며, text는 노드로 간주됨.

 

2.

첫 번째 <li> 앞에 공백 존재 시, 결과값은 "undefined" 나옴.