var parentInnerHTML = document.getElementById('parent-inner-html'); var parentRemoveChild = document.getElementById('parent-remove-child'); var domChildInnerHTML = document.getElementById('child-inner-html'); var domChildRemoveChild = document.getElementById('child-remove-child'); var childInnerHTML = document.createElement('div'); var childRemoveChild = document.createElement('div'); childInnerHTML.innerHTML = "I'm a child to be removed with innerHTML!"; childRemoveChild.innerHTML = "I'm a child to be removed with removeChild!"; parentInnerHTML.appendChild(childInnerHTML); parentRemoveChild.appendChild(childRemoveChild); setTimeout(function() { parentInnerHTML.innerHTML = ''; while (parentRemoveChild.firstChild) { parentRemoveChild.removeChild(parentRemoveChild.firstChild); } setTimeout(function() { console.log('childInnerHTML: ', childInnerHTML); console.log('childRemoveChild: ', childRemoveChild); console.log('DOM childInnerHTML: ', domChildInnerHTML); console.log('DOM childRemoveChild: ', domChildRemoveChild); parentInnerHTML.appendChild(childInnerHTML); parentRemoveChild.appendChild(childRemoveChild); parentInnerHTML.appendChild(domChildInnerHTML); parentRemoveChild.appendChild(domChildRemoveChild); }, 500); }, 500);
<div id="parent-inner-html"> <div id="child-inner-html">I'm a child from the DOM to be removed by innerHTML!</div> </div> <div id="parent-remove-child"> <div id="child-remove-child">I'm a child from the DOM to be removed by removeChild!</div> </div>
#parent-inner-html { background-color: red; color: white; } #parent-remove-child { background-color: blue; color: white; }