[자바스크립트] children, appendChild 구현이 안됩니다ㅠㅠ 도와주세요
조회수 766회
//JavaScript
<div id="target3">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input type="button" onclick="callReplaceChild()" value="replaceChild()"/>
<script>
function callReplaceChild(){
var ol = document.createElement('ol');
var target = document.getElementById('target3');
var ul = document.querySelector('#target3>ul');
console.log(ul);
for(var i=0; i<ul.children.length;i++){
console.log("li:",ul.children[i]);
ol.appendChild(ul.children[i]);
}
console.log("target: ",target.firstChild.nextSibling);
target.replaceChild(ol, target.firstChild.nextSibling);
}
</script>
</div>
ul태그를 ol태그로 변경하고 싶은데요, 중간에 for문에서 appendChild로 li 태그들을 ol태그의 자식으로 넣어주고 싶은데 실행하면 CSS를 제외한 값들만 들어갑니다. 코드상으로는 맞는것같고 ol.appendChild(ul.children[i])을 제외했을때 log에서 ul.children[i]는 전부 li태그를 잘 지정하는데.. 저걸 넣어서 실행만하면 2번째 li태그는 제외되는데 왜그럴까요ㅠㅠ brackets 오류인가요?? 고수님들 도와주세요ㅠㅠ
1 답변
-
정확히는 "CSS"만 빠지는게 아니고,
appendChild()의 특성에 의해서 특정 인덱스가 건너뛰어지는 겁니다.만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (중략)이것은 한 노드가 문서상의 두 지점에 동시에 존재할 수 없다는 것을 의미합니다. 그래서 만약 노드가 이미 부모를 가지고 있다면 우선 삭제되고 새로운 위치로 이동합니다. 출처
for (var i = 0; i < ul.children.length; i++) { ol.appendChild(ul.children[i]); console.log(ul.innerHTML); // <------------- 이 라인을 나중에 추가해서 한번 확인해 보세요. 왜 CSS만 빠졌는지 알수 있습니다. }찾아보니 전형적으로 다음과 같이 합니다.
// 작동되는 것 확인함 // 더이상 자식이 없을 때까지 첫째 애를 뽑아다가 다른 집 자식으로 보내버림 while (ul.childNodes.length > 0) { ol.appendChild(ul.childNodes[0]); }PS. 지금처럼
<script>태그가 다른 DOM 안에 있는 것은 매우 좋지 않은 방식입니다. 그 DOM이 문서에서 사라지면 그 스크립트도 사라져 버립니다. 꼭 그래야 할 이유가 없다면 DOM 조작을 실행하는 스크립트는</body>직전에 가는 것이 좋습니다.
댓글 입력