克隆 DOM 中的元素并更改属性，同时在 javascript 中重用它

Question

我的代码如下

;(function(window){

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

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

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

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

})(window);

我可以将目标 div 中从 'blog_main_contents' 标签收集到的 h3 更改为 'p' 标签吗？

感谢和问候

Answer 1

您可以遍历 h3 的子节点并将其附加到新的段落元素：

var paragraph = document.createElement('p');
var headingChildren = $headings[i].cloneNode(true).childNodes;
for (var j = 0; j < headingChildren.length; j++) {
  paragraph.appendChild(headingChildren[j]);
}
description_window.append(paragraph);

Answer 2

我在这个例子中使用了 insertAdjecentHtml 并不真正需要 jquery。

for (let i = $headings.length - 1; i >= 0; --i) {
   description_window.insertAdjacentHTML("afterbegin","<p>"+ $headings[i].innerHTML + "</p>");
};

这是一个有效的 Example.

克隆 DOM 中的元素并更改属性，同时在 javascript 中重用它

Clone element in a DOM and change the attribute while reusing it in javascript

javascript

dom

clone