How to move all HTML element children to another parent using JavaScript?

Basically, you want to loop through each direct descendent of the old-parent node, and move it to the new parent. Any children of a direct descendent will get moved with it. var newParent = document.getElementById(‘new-parent’); var oldParent = document.getElementById(‘old-parent’); function move() { while (oldParent.childNodes.length > 0) { newParent.appendChild(oldParent.childNodes[0]); } } #old-parent { background-color: red; } … Read more

What is innerHTML on input elements?

Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements. value applies only to objects that have the value attribute (normally, form controls). innerHtml applies to every object that can contain HTML (divs, spans, but many other and also form controls). They are not equivalent … Read more

How to add a class to a given element?

If you’re only targeting modern browsers: Use element.classList.add to add a class: element.classList.add(“my-class”); And element.classList.remove to remove a class: element.classList.remove(“my-class”); If you need to support Internet Explorer 9 or lower: Add a space plus the name of your new class to the className property of the element. First, put an id on the element so … Read more