JavaScript를 사용하여 모든 HTML 요소 자식을 다른 부모로 이동하는 방법은 무엇입니까?

상상해보십시오.

<div id="old-parent">
    <span>Foo</span>
    <b>Bar</b>
    Hello World
</div>
<div id="new-parent"></div>

자바 스크립트에서 모든 자식 노드 (두 요소, 텍스트 노드)를 이동 기록 할 수있는 일 old-parent에 new-parentjQuery를하지 않고?

노드 사이의 공백은 신경 쓰지 않지만 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]);
}

현대적인 방법 :

newParent.append(...oldParent.childNodes);

1. .append는 .appendChild. 가장 큰 차이점은 한 번에 여러 노드를 허용하고 심지어는 다음과 같은 일반 문자열을 허용한다는 것입니다..append('hello!')
2. 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

다음은 간단한 기능입니다.

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);
}

다음은 데모입니다.

이 답변은 내부 코드 (innerHTML)를 하나에서 다른 코드로 전송하는 것 외에 다른 작업을 수행 할 필요가없는 경우에만 실제로 작동합니다.

// 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 = '';

도움이 되었기를 바랍니다!

-아이디 이름에 사용 하지 않으면 이렇게 할 수 있습니다.

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>