Làm cách nào để chuyển tất cả phần tử con HTML sang phần tử gốc khác bằng JavaScript?

Hãy tưởng tượng:

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

JavaScript nào có thể được viết để di chuyển tất cả các nút con (cả phần tử và nút văn bản) từ old-parentchỗ new-parentkhông có jQuery?

Tôi không quan tâm đến khoảng trắng giữa các nút, mặc dù tôi hy vọng sẽ bắt được lỗi Hello World, chúng cũng sẽ cần được di chuyển.

BIÊN TẬP

Để rõ ràng, tôi muốn kết thúc bằng:

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

Câu trả lời của câu hỏi mà từ đó đây là một bản sao được đề xuất sẽ dẫn đến:

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

BẢN GIỚI THIỆU

Về cơ bản, bạn muốn lặp qua từng nút con trực tiếp của nút cha cũ và chuyển nó sang nút cha mới. Bất kỳ đứa trẻ nào thuộc dòng dõi trực hệ sẽ cảm động với nó.

var newParent = document.getElementById('new-parent');
var oldParent = document.getElementById('old-parent');

while (oldParent.childNodes.length > 0) {
    newParent.appendChild(oldParent.childNodes[0]);
}

Cách hiện đại:

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

1. .appendlà sự thay thế cho .appendChild. Sự khác biệt chính là nó chấp nhận nhiều nút cùng một lúc và thậm chí cả các chuỗi đơn giản, như.append('hello!')
2. oldParent.childNodescó thể lặp lại nên nó có thể được trải rộng ...để trở thành nhiều tham số của.append()

Bảng tương thích của cả hai (ngắn gọn: 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/Sosystem_syntax#Browser_compatibility

Đây là một chức năng đơn giản:

function setParent(el, newParent)
{
    newParent.appendChild(el);
}

el's childNodeslà những yếu tố để được di chuyển, newParent là yếu tố elsẽ được chuyển đến, do đó bạn sẽ thực hiện các chức năng như:

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

Đây là bản Demo

Câu trả lời này chỉ thực sự hoạt động nếu bạn không cần phải làm gì khác ngoài việc chuyển mã bên trong (innerHTML) từ mã này sang mã khác:

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

Hi vọng điêu nay co ich!

Nếu bạn không sử dụng -tên của id thì bạn có thể làm điều này

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>