Converting HTML string into DOM elements?
You typically create a temporary parent element to which you can write the innerHTML
, then extract the contents:
var wrapper= document.createElement('div');
wrapper.innerHTML= '<div><a href="#"></a><span></span></div>';
var div= wrapper.firstChild;
If the element whose outer-HTML you've got is a simple <div>
as here, this is easy. If it might be something else that can't go just anywhere, you might have more problems. For example if it were a <li>
, you'd have to have the parent wrapper be a <ul>
.
But IE can't write innerHTML
on elements like <tr>
so if you had a <td>
you'd have to wrap the whole HTML string in <table><tbody><tr>
...</tr></tbody></table>
, write that to innerHTML
and extricate the actual <td>
you wanted from a couple of levels down.
Why not use insertAdjacentHTML
for example:
// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>here
You can use a DOMParser
, like so:
var xmlString = "<div id='foo'><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");
console.log(doc.firstChild.innerHTML); // => <a href="#">Link...
console.log(doc.firstChild.firstChild.innerHTML); // => Link