CODEWITHSUNDEEP
javascripthtmldom
vulcan raven
vulcan raven

Reputation: 33582

Create node from markup string

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!

Upvotes: 8

Views: 12290

Answers (4)

Artiphishle
Artiphishle

Reputation: 890

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);

Upvotes: 1

Bob
Bob

Reputation: 1679

function htmlMarkupToNode(html){
    let template = document.createElement("template");        
    template.innerHTML = html ;
    let node = template.content.cloneNode(true) ;        
    return node ;   
}

document.getElementById("divOne").appendChild(htmlMarkupToNode("<table><tbody><tr><td><input type='text' value='0' /></td></tr></tbody></table>"));

Upvotes: 0

caleb
caleb

Reputation: 1637

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);

Upvotes: 4

Rob W
Rob W

Reputation: 349252

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>"
);

Upvotes: 17

Related Questions