Converting HTML string into DOM elements?

javascript html dom
Tower picture Tower · Jun 23, 2010 · Viewed 379.8k times · Source

Is there a way to convert HTML like:

<div>
<a href="#"></a>
<span></span>
</div>

or any other HTML string into DOM element? (So that I could use appendChild()). I know that I can do .innerHTML and .innerText, but that is not what I want -- I literally want to be capable of converting a dynamic HTML string into a DOM element so that I could pass it in a .appendChild().

Update: There seems to be confusion. I have the HTML contents in a string, as a value of a variable in JavaScript. There is no HTML content in the document.

Answer

maerics picture maerics · Jun 23, 2010

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

Related questions

How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
How to make JavaScript execute after page load?

I'm executing an external script, using a <script> inside <head>. Now since the script executes before the page has loaded, I can't access the <body>, among other things. I'd like to execute some JavaScript …

Read More
How can I select an element by name with jQuery?

Have a table column I'm trying to expand and hide: jQuery seems to hide the td elements when I select it by class but not by element's name. For example, why does: $(".bold").hide(); // selecting by class works $("tcol1").hide(); // …

Read More