javascript - 从 body 内容 append DIV 会删除 DOM 元素

Question

以下是我的代码

;(function(window){

    var description_window= document.querySelector('.post_description');

    var $headings= document.querySelectorAll('.blog_main_content h3');

    for (var i = $headings.length - 1; i >= 0; i--) {

        description_window.appendChild($headings[i]);
    };

})(window);

这里“.post_description”是我尝试向其 append 元素的 DIV 的类。这些元素是“.blog_main_content”的 H3 元素。但是，这样做会从博客主要内容中删除 h3 元素。

有人可以帮忙吗

谢谢

Answer 1

您需要克隆有问题的节点，目前$headings指的是实际的DOM内容，而不是它的js版本。您可以使用cloneNode这样做。像这样的东西:

;(function(window){

var description_window= document.querySelector('.post_description');

var $headings= document.querySelectorAll('.blog_main_content h3');

for (var i = $headings.length - 1; i >= 0; i--) {

    description_window.appendChild($headings[i].cloneNode(true));
};

})(窗口);

这里也提出了类似的问题how to get clone element of queryselectorall and append to anothor div