요소 배열에 insertBefore 사용하기

Question

배열 요소를 가지고 있고 배열을 반복하면서 각 요소에 inserBefore를 사용하고 싶습니다. 배열의 각 요소 다음에 삽입 할 요소를 추가해야하지만 배열의 마지막 요소에만 추가합니다. 폐쇄 문제라고 생각했지만 클로저를 사용한 후에도 여전히 문제가 발생합니다. 클로저가 없으면 클래스 이름을 배열이 있던 키 값으로 변경하여 테스트했으며 문제가 전혀 없다고 변경했습니다.

for(var i in elems){ 
        var refElem = elems[i]; 

         refElem.parentNode.insertBefore(elementToInsert, refElem.nextSibling); 
       } 

다음은 코드에서 클로저를 뺀 값입니다. 배열의 각 요소에 elementToInsert를 어떻게 추가 할 수 있습니까?

Answer 1

이 그것은 요소

문제가 발생 어디

의 각 후 요소 - 투 --삽입을 추가하기로했다, 당신은 DOM에 하나 개의 요소를 여러 번 삽입 할 수 없습니다. 그렇게하면 DOM 요소를 어딘가에 (다시) 삽입하기 전에 요소를 제거하게됩니다. 따라서 루프의 각 회전마다 고유 한 요소를 만들어야합니다 (예 : cloningelementToInsert).

Btw, 절대 사용하지 마십시오 for…in-loops with arrays!

Answer 2

Bergi가 말했듯이, 삽입하려는 요소는 실제로 추가되고 노드에서 제거됩니다.

for(var i in elems){ 
    var refElem = elems[i]; 
    refElem.parentNode.insertBefore(elementToInsert.CloneNode(), refElem.nextSibling); 
} 

'deep'매개 변수를 알릴 수도 있습니다.이 매개 변수는 모든 하위 노드도 복제합니다.

https://developer.mozilla.org/en-US/docs/DOM/Node.cloneNode

Answer 3

전에 포스트 조금 보정 :

for(var i in elems){ 
    var refElem = elems[i]; 
    refElem.parentNode.insertBefore(elementToInsert.cloneNode(), refElem.nextSibling); 
} 

함수 cloneNode()는 소문자로 시작한다.