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

Question

My code is given below

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

Can I change the h3 collected from the 'blog_main_contents' to 'p' tags in the target div.

Thanks and regards

madox2 · Accepted Answer · 2017-05-05 15:24:44Z

1

You can iterate through h3's child nodes and append it to new paragraph element:

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

answered May 5, 2017 at 15:24

madox2

52.3k21 gold badges106 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Antonio Smoljan · Accepted Answer · 2017-05-05 15:46:37Z

0

I used insertAdjecentHtml in this example didnt really need jquery.

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

Here is a working Example.

answered May 5, 2017 at 15:46

Antonio Smoljan

2,2071 gold badge15 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related