JSFiddle - React, Tailwind, and code Playground

HTML

<span></span>
<span></span>
<span></span>

<div>

</div>

<div>
</div>


<p></p><p></p>

CSS

span{ color: green; }
div{color:red;}

p{color:blue;}

JavaScript

(function($,undefined){
    $.fragment = function(){
       var fragment = document.createDocumentFragment();
       return{
            append: function(node){
                if(node instanceof jQuery){
                    fragment.appendChild(node.get(0));
                }else if(Object.prototype.toString.call(node).slice(8, -1) === "String"){
                    fragment.appendChild(document.createTextNode(node));
                }else{
                    fragment.appendChild(node);
                }
            },// </ append >   
            appendTo: function(target){
                if(target instanceof jQuery){
                    target = target.get();
                }

                if(target.nodeName !== undefined){
                    target.appendChild(fragment.cloneNode(true));
                    return;
                }
                // we can do it with for loop as well!
                $.each(target,function(i,tgt){
                        tgt.appendChild(fragment.cloneNode(true));
                });
                
            }// </ appendTo >   
        }
    }
})(jQuery);


var fragment  = $.fragment();
fragment.append("test1");
fragment.append($("<b>test</b>"));
fragment.append("test2");

fragment.appendTo($("span")); // copy to all spans
fragment.appendTo(document.getElementsByTagName("div")[0]); // copy to the first div
fragment.appendTo(document.getElementsByTagName("p")); // copy to all Ps