Is there a way to create a DOM object, given its rendered string?

Question

Is there a way to create a DOM object from the whole string, not just the innerHTML? I have a string in the form of a complete rendered DOM:

<some_tag_name class=... id=...>inner text</some_tag_name>     (1)

and want to directly create a DOM object out of it. I know that there is a way to do:

e = document.createElement("some_tag_name")
e.innerHTML = ...
e.className = ...
e.id = ...

but when I do that, I have to extract the innerhtml part from the string (1) that I have, and analyze the tag type and all the attributes and assign that to e separately. I want to do all that simply from the string in the form of (1) that I have.

Edit

I followed the answers, but it was trickier than it seemed at first. The problem is that when you have a string representing things like tr, td, etc., and you try to put that as the innerHTML to a temporarily created div, the browser automatically adds extra tags outside of it. The following is my workaround to overcome this problem, where c is the string and e is the created element:

var cTagName = c.match(new RegExp('[a-zA-Z]+'))[0].toUpperCase();
var e = document.createElement("div");
    e.innerHTML = c;
    e = e.children[0];
//// When the type of `e' does not match what `c' expects, the browser
////    automatically modifies the type of c. The following is to undo this.
if(e.tagName.toUpperCase() != cTagName){
    e = document.createElement("table");
    e.innerHTML = c;
    e = e.children[0];
};
if(e.tagName.toUpperCase() != cTagName){
    e = document.createElement("tbody");
    e.innerHTML = c;
    e = e.children[0];
};
if(e.tagName.toUpperCase() != cTagName){
    e = document.createElement("tr");
    e.innerHTML = c;
    e = e.children[0];
};

Not sure what yo're trying to do with it, but you can create a div element, set the innerHTML to your string, and get the children out of the element you created. Or, there's always jQuery, which actually does that exact same thing just in the background. — Paolo Bergantino
– Paolo Bergantino, Commented Mar 23, 2012 at 17:05

Sophie Alpert · Accepted Answer · 2012-03-23 17:07:13Z

4

You can always do:

var div = document.createElement("div");
div.innerHTML = "<some> ... </some>"
var e = div.children[0];

(or if you're using jQuery, simply $("<some ... >")[0]).

answered Mar 23, 2012 at 17:07

Sophie Alpert

144k37 gold badges229 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sawa Over a year ago

Thanks. Your answer seems robust. I was wondering between josh3736's answer, and yours. Both look good.

sawa Over a year ago

After doing this, is there a way to remove the original "div" element e without destroying div.children[0]? I am going to use this a lot, and, and at later random point, the div.children[0] objects will be deleted entirely. the am afraid lots of these empty "div"s will be existing. Will they be garbage collected?

Sophie Alpert Over a year ago

Yep, they'll be garbage collected automatically.

sawa Over a year ago

Thanks for all your help. I tried your way, and actually, there was one problem. I overcame that problem as I show in the edit to the question. Do you have any thoughts about it; good or bad?

Sophie Alpert Over a year ago

Yep, I guess you do need to do that sort of thing. jQuery handles all of this for you, by the way.

josh3736 · Accepted Answer · 2012-03-23 17:13:32Z

4

You're looking for the outerHTML property.

var el = document.createElement('tag');
document.body.appendChild(el); // The element must be appended to the DOM before
                               // setting outerHTML.  Otherwise, it will throw a
                               // NO_MODIFICATION_ALLOWED_ERR.
el.outerHTML='<some_tag_name class=... id=...>inner text</some_tag_name>';

Given that Firefox is a little behind the times on this one, it's probably safer to just create a wrapper div and set its innerHTML.

var el = document.createElement('div');
el.innerHTML = '<some_tag_name class=... id=...>inner text</some_tag_name>';

edited Mar 23, 2012 at 17:13

answered Mar 23, 2012 at 17:05

josh3736

146k34 gold badges227 silver badges273 bronze badges

4 Comments

Rob W Over a year ago

Note that Firefox did not support this until version 11.

Andy E Over a year ago

It's worth mentioning that support for outerHTML was only recently added in Firefox (v11, March 2012), though most other browsers have supported it for a long time. So this isn't really a cross browser solution right now. (edit: Ninjad by @Rob because I had to answer the door :-P)

sawa Over a year ago

Thanks, your will be the best solution after a short while. For now, I will go with Ben's solution.

josh3736 Over a year ago

@Rob, Andy: thanks, didn't realize that. It is a little ridiculous that it took 11 years to fix that...

jnrbsn · Accepted Answer · 2012-03-23 17:09:49Z

0

You can do it with jQuery:

var myDiv = $('<div class="my-div">This is my div!</div>');

answered Mar 23, 2012 at 17:09

jnrbsn

2,5521 gold badge20 silver badges27 bronze badges

2 Comments

sawa Over a year ago

Sadly, I do not use jQuery... If I did, it would be a good solution.

josh3736 Over a year ago

Note that behind the scenes, jQuery is simply creating a wrapper div and setting its innerHTML.

Collectives™ on Stack Overflow

Is there a way to create a DOM object, given its rendered string?

3 Answers 3

5 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related