반응형
JavaScript를 사용하여 모든 HTML 요소 자식을 다른 부모로 이동하는 방법은 무엇입니까?
상상해보십시오.
<div id="old-parent">
<span>Foo</span>
<b>Bar</b>
Hello World
</div>
<div id="new-parent"></div>
자바 스크립트에서 모든 자식 노드 (두 요소, 텍스트 노드)를 이동 기록 할 수있는 일 old-parent
에 new-parent
jQuery를하지 않고?
노드 사이의 공백은 신경 쓰지 않지만 stray를 잡을 것으로 예상하지만 Hello World
그대로 마이그레이션해야합니다.
편집하다
명확하게 말하면 다음과 같이 끝내고 싶습니다.
<div id="old-parent"></div>
<div id="new-parent">
<span>Foo</span>
<b>Bar</b>
Hello World
</div>
이것이 제안 된 중복 인 질문에 대한 답변은 다음과 같습니다.
<div id="new-parent">
<div id="old-parent">
<span>Foo</span>
<b>Bar</b>
Hello World
</div>
</div>
기본적으로 이전 상위 노드의 각 직계 하위 항목을 반복하여 새 상위 노드로 이동하려고합니다. 직계 자손의 모든 자녀는 함께 움직입니다.
var newParent = document.getElementById('new-parent');
var oldParent = document.getElementById('old-parent');
while (oldParent.childNodes.length > 0) {
newParent.appendChild(oldParent.childNodes[0]);
}
다음은 간단한 기능입니다.
function setParent(el, newParent)
{
newParent.appendChild(el);
}
el
의는 childNodes
있습니다 이동하는 요소는, newParent
은 IS 요소 el
로 이동합니다 당신이 좋아하는 기능을 수행 할 수 있도록 :
var l = document.getElementById('old-parent').childNodes.length;
var a = document.getElementById('old-parent');
var b = document.getElementById('new-parent');
for (var i = l; i >= 0; i--)
{
setParent(a.childNodes[0], b);
}
현대적인 방법 :
newParent.append(...oldParent.childNodes);
.append
는.appendChild
. 가장 큰 차이점은 한 번에 여러 노드를 허용하고 심지어는 다음과 같은 일반 문자열을 허용한다는 것입니다..append('hello!')
oldParent.childNodes
이고 반복 가능한 가에 확산 될 수 있도록...
여러 매개 변수가 될.append()
두 가지의 호환성 표 (요약 : Edge 17+, Safari 10+) :
- https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append#Browser_compatibility
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Browser_compatibility
This answer only really works if you don't need to do anything other than transferring the inner code (innerHTML) from one to the other:
// Define old parent
var oldParent = document.getElementById('old-parent');
// Define new parent
var newParent = document.getElementById('new-parent');
// Basically takes the inner code of the old, and places it into the new one
newParent.innerHTML = oldParent.innerHTML;
// Delete / Clear the innerHTML / code of the old Parent
oldParent.innerHTML = '';
Hope this helps!
If you not use -
in id's names then you can do this
oldParent.id='xxx';
newParent.id='oldParent';
xxx.id='newParent';
oldParent.parentNode.insertBefore(oldParent,newParent);
#newParent { color: red }
<div id="oldParent">
<span>Foo</span>
<b>Bar</b>
Hello World
</div>
<div id="newParent"></div>
반응형
'Programing' 카테고리의 다른 글
개체가 Mockito 모의인지 어떻게 알 수 있습니까? (0) | 2020.11.28 |
---|---|
파이썬 프로그램에서 youtube-dl을 사용하는 방법 (0) | 2020.11.28 |
`npm install --save`가 package.json에 엄격한 버전을 추가하도록합니다. (0) | 2020.11.28 |
내 코드가 내가 일하는 회사에서만 사용하는 경우 package.json의 라이센스 필드에 무엇을 입력해야합니까? (0) | 2020.11.28 |
VBA 함수 내에서 개체를 Nothing으로 설정해야합니까? (0) | 2020.11.28 |