JSFiddle - React, Tailwind, and code Playground

HTML

<div style="color: #777">uncolored text <span style="color: #ff0000">some red text! </span></div><br/>


<textarea id="info" rows="15" cols="120"></textarea>

JavaScript

// implement my own cloneNode
Node.prototype.cloneNode2 = function(deep) {
    var cloned_node;
    if (this.nodeType != this.TEXT_NODE){
        var node_as_string = this.outerHTML;
        var new_node = document.createElement(this.nodeName);
        new_node.innerHTML = node_as_string;
  
        cloned_node = new_node.firstChild;
        while (!deep && cloned_node.firstChild) {
            cloned_node.removeChild(cloned_node.firstChild);
        }
               
    } else{
     // is a text node
     cloned_node = this;        
    }
 
    return cloned_node;
}

$(function() {
    var element = $("div")[0];
    // default cloneNode requires true
    $("textarea").text(
        "cloneNode(true) :\n " + 
        element.cloneNode(true).outerHTML + "\n" + 
        element.cloneNode2(true).outerHTML + 
        "\n\ncloneNode(false) :\n" + 
        element.cloneNode(false).outerHTML + "\n" + 
        element.cloneNode2(false).outerHTML + 
        "\n\n<textNode>.cloneNode(true) : \n" + 
        element.firstChild.cloneNode(true).data + "\n" + 
        element.firstChild.cloneNode2(true).data + 
        "\n\n<textNode>.cloneNode(false) : \n"  + 
        element.firstChild.cloneNode(false).data + "\n" + 
        element.firstChild.cloneNode2(false).data  
    );
});