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

• 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

3 Answers 3

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"