JSFiddle - React, Tailwind, and code Playground

by zequez

HTML

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

CSS

#parent-inner-html {
    background-color: red;
    color: white;
}

#parent-remove-child {
    background-color: blue;
    color: white;
}

JavaScript

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