Create node from markup string
Solution 1
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>"
);
Solution 2
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);
Solution 3
some news on this topic:
the modern approach is to use the <template>
tag, which you place e.g. before the body closes (the browser will ignore it).
it's a standardization of client side templating, and doesn't need to use .innerHTML, which could lead to security issues (XSS)
example:
<template id='tplArticle'>
<article class='newsItem'>
<h1 class='title'></h1>
<p class='paragraph'>
</article>
</template>
whenever you need it, you just grab its content and clone (!!) it to reuse it:
// .content will grab the content of the template, not the <template> tag
// this will return a document fragment
const $articleFragment = document.querySelector('#tplArticle').content;
// clone it, otherwise you get the same reference and it won't be reusable (true makes a deep copy)
const $article = document.importNode($articleFragment, true);
// then e.g. append it to the body
document.body.appendChild($article);
vulcan raven
Updated on July 21, 2022Comments
-
vulcan raven almost 2 years
Is there a way to convert markup string to node object in JavaScript? Actually I am looking for the subsitute for:
document.getElementById("divOne").innerHTML += "<table><tbody><tr><td><input type='text' value='0' /></td></tr></tbody></table>"
something like
document.getElementById("divOne").appendChild(document.createNodeFromString("<table><tbody><tr><td><input type='text' value='0' /></td></tr></tbody></table>"))
using createNodeFromString rather creating the table element then append its child elements then attach their respective attributes and values!
-
Rob W about 12 yearsOlder IE versions will complain about this, because they cannot handle setting the
innerHTML
property on some elements, including<table>
. See also this article. -
faebster over 2 yearsah, just seen your post now, sorry for adding it myself, I've tried to be a bit more detailed though... btw you can add the language of the code (to format it) by adding the language name after the 3 backticks
-
vulcan raven over 2 yearsNice and efficient, thanks! caniuse.com/?search=%3Ctemplate%3E suggests that we should just use it in this day and age.
-
faebster over 2 yearsalso nice to check out: WebComponents: developer.mozilla.org/en-US/docs/Web/Web_Components (<template>, <slot>, Shadow DOM, Custom Elements) 2) medium.com/swlh/functional-web-components-90a0edc2aa90 for functional programming friends like me: great article whether to use functional or OOP for WebComponents (or in general)