JSFiddle - React, Tailwind, and code Playground
HTML
<div><b>Hello</b>, I'm a. ninja!</div>
<div id="test2"></div>
JavaScript
function getNodes(htmlString, doc, fragment) {
var map = {
"<td":[3,"<table><tbody><tr>", "</tr></tbody></table>"],
"<th":[3,"<table><tbody><tr>", "</tr></tbody></table>"],
"<tr":[2,"<table><thead>", "</thead></table>"]
}
console.log(htmlString)
var tagName = htmlString.match(/<\w+/),
mapEntry = tagName ? map[tagName[0]] : null;
if(!mapEntry) mapEntry = [0, " ", " " ];
var div = (doc || document).createElement("div");
div.innerHTML = mapEntry[1] + htmlString + mapEntry[2];
while(mapEntry[0]--) div = div.lastChild;
if(fragment) {
while(div.firstChild) {
fragment.appendChild(div.firstChild)
}
}
return div.childNodes;
}
function root(elem, cur) {
return elem.nodeName.toLowerCase() === "table" && cur.nodeName.toLowerCase() === "tr" ? (elem.getElementsByTagName("tbody")[0] || elem.appendChild(elem.ownerDocument.createElement("tbody"))) : elem;
}
window.onload = function(){
function insert(elems, args, callback) {
if(elems.length) {
var doc = elems[0].ownerDocument || elems[0],
fragment = doc.createDocumentFragment(),
scripts = getNodes(args[0], doc, fragment),
first = fragment.firstChild;
if(first) {
for (var i = 0; elems[i]; i++) {
callback.call(root(elems[i], first), i > 0 ? fragment.cloneNode(true) : fragment);
}
}
}
}
var divs = document.getElementsByTagName("div");
insert(divs, ["<b>First</b>"], function (fragment) { this.appendChild(fragment) })
}