将 HTML 字符串转换为 Javascript 文档说明

Question

Is there an convenient way to convert an HTML string to JavaScript instructions that would produce the same markup with the DOM.

Something along the lines of:

Input

<div class="foo" tabindex="4">
  bar
  <button title="baz">bar</button>
</div>

Output

let a = document.createElement('div');
a.classList.add('foo');
a.setAttribute('tabindex', '4');
let b = document.createTextNode('bar');
a.appendChild(b);
let c = document.createElement('button');
c.setAttribute('title', 'baz');
let d = document.createTextNode('bar');
a.appendChild(d);

Answer 1

With a little research you can find this function:

function stringToElement(string) {
    var parser = new DOMParser();
    var content = 'text/html';
    var DOM = parser.parseFromString(string, content);

    // return element
    return DOM.body.childNodes[0];
}
stringToElement('<li>text</li>') // OUTPUT: <li>text</li>

And I think this is what you want...

Answer 2

If what you really need/want is to convert html string to DOM element, you have DOMparser

Sample:

var phrase = "<div id='foo'><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(phrase, "text/xml");

You can use that with a template string to put yout html