javascript - Do innerHTML create nodes in the DOM tree? - Stack Overflow

admin管理员组

文章数量:1346682

If I do this:

document.getElementById("myDiv").innerHTML = "some_html_code";

will that create nodes in my DOM three as it would if I used appendChild()?

Reason for asking is that I'm creating a mobile application where memory usage must be low. I don't want to create a lot of nodes.

If I do this:

document.getElementById("myDiv").innerHTML = "some_html_code";

will that create nodes in my DOM three as it would if I used appendChild()?

Reason for asking is that I'm creating a mobile application where memory usage must be low. I don't want to create a lot of nodes.

• javascript
• html
• dom
• memory

Share Improve this question Follow edited Dec 4, 2012 at 16:41 asked Dec 4, 2012 at 16:20 user920041user920041 6

• 4 Yes, it creates the nodes. And they're removed when you empty the div. – Denys Séguret Commented Dec 4, 2012 at 16:21
• 1 One thing to keep in mind is that using innerHTML is that you will lose any event handlers you may have created inside #myDiv. – Chris Sobolewski Commented Dec 4, 2012 at 16:23
• @ChrisSobolewski Good point! And also that you cannot bind new event handlers (other than inline handlers in the string) – Ian Commented Dec 4, 2012 at 16:24
• Something to look at for maybe helping decide which to use? stackoverflow./questions/2305654/… – Ian Commented Dec 4, 2012 at 16:26
• @Ian, it is added to dom, but i cant add new handlers? – user920041 Commented Dec 4, 2012 at 16:26

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 7

It is roughly the same as

var div = document.getElementById("myDiv");

while( div.firstChild ) {
    div.removeChild( div.firstChild );
}

div.appendChild( document.createTextNode("a_html_string") );

Of course, if by "html_string" you mean a string consisting of plex html, then of course nodes are created from the html as appropriate (element nodes, ment nodes, text nodes etc). But a simple string of text is simply a single text node.

So if your html string were '<div id="hello">world</div>', that would roughly be:

var div = document.getElementById("myDiv");

while( div.firstChild ) {
    div.removeChild( div.firstChild );
}

var anotherDiv = document.createElement("div");
anotherDiv.setAttribute("id", "hello");
anotherDiv.appendChild(document.createTextNode("world"));
div.appendChild(anotherDiv);

It is probably shocking how much is happening with a simple innocent looking .innerHTML setter, and this is not even including parsing the html.

It's important to note that none of this is garbage, all of those objects created are necessary. To make sure you are only creating necessary nodes, do not use unnecessary whitespace between nodes. For example

<span>hello</span> <span>world</span>

is 3 text nodes but

<span>hello</span><span> world</span>

is only 2 text nodes.

A long while ago I created a facetious jsfiddle that converts html to "DOM code" for all of those .innerHTML haters.

Yes, the innerHTML will be parsed and the nodes will be created. There's no way around it, the DOM is made of nodes.

It will create string "a_html_string" and it will be displayed. but you can also append elements:

document.getElementById("myDiv").innerHTML = "<a> Link </a>"; // will be displayed "Link"

本文标签： javascriptDo innerHTML create nodes in the DOM treeStack Overflow