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" 나옴.
