동일한 클래스 이름을 공유하는 두 개의 메뉴에 목록 항목을 추가해야하는 for 루프가 있습니다. 문제는 내가 그것의 색인을 참조하거나 I의 색인을 사용하면 마지막 항목에만 추가됩니다.
HTML
<ul class="menu">
<li>List One</li>
</ul>
<ul class="menu">
<li>List Two</li>
</ul>
JS
var menu = document.querySelectorAll('.menu');
var listItem = document.createElement('li');
for(i=0; i < menu.length; ++i){
menu[i].appendChild(listItem);
}
이것은 JS의 또 다른 이상한 특징입니까? 아니면 뭔가 빠졌습니까?
해야한다...
var menu = document.querySelectorAll('.menu');
var listItem = document.createElement('li');
for (var i=0; i < menu.length; ++i) {
menu[i].appendChild(listItem.cloneNode());
// or menu[i].appendChild(document.createElement('li'));
// the point is, you'll have to create a new element and append it
}
그대로 동일한 요소를 한 상위 .menu항목에서 다른 항목으로 이동합니다 . 문서 인용 :
주어진 자식이 문서의 기존 노드에 대한 참조 인 경우 appendChild ()는 현재 위치에서 새 위치로 노드를 이동합니다 (다른 노드에 추가하기 전에 부모 노드에서 노드를 제거 할 필요가 없음).
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다