Create node from markup string
There's not an existing cross-browser function for this. The following method can be used to achieve the desired effect (using a DocumentFragment
for an optimized performance, based on this answer):
function appendStringAsNodes(element, html) {
var frag = document.createDocumentFragment(),
tmp = document.createElement('body'), child;
tmp.innerHTML = html;
// Append elements in a loop to a DocumentFragment, so that the browser does
// not re-render the document for each node
while (child = tmp.firstChild) {
frag.appendChild(child);
}
element.appendChild(frag); // Now, append all elements at once
frag = tmp = null;
}
Usage (indention for readability):
appendStringAsNodes(
document.getElementById("divOne"),
"<table><tbody><tr><td><input type='text' value='0' /></td></tr></tbody></table>"
);
Yes, you can do that.
var myNewTable = document.createElement("table");
myNewTable.innerHTML = "<tbody><tr><td><input type='text' value='0' /></td></tr></tbody>"
document.getElementById("divOne").appendChild(myNewTable);