5

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.

6
  • 4
    Yes, it creates the nodes. And they're removed when you empty the div. 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. 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
    Dec 4, 2012 at 16:24
  • Something to look at for maybe helping decide which to use? stackoverflow.com/questions/2305654/…
    – Ian
    Dec 4, 2012 at 16:26
  • @Ian, it is added to dom, but i cant add new handlers?
    – user920041
    Dec 4, 2012 at 16:26

3 Answers 3

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 complex html, then of course nodes are created from the html as appropriate (element nodes, comment 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.

5
  • Same comment as @karaxuna :-)
    – Christophe
    Dec 4, 2012 at 16:26
  • @Christophe yeah I have added more explanation :P
    – Esailija
    Dec 4, 2012 at 16:27
  • Wasn't the same comment as karaxuna at all (before edits) anyways
    – Ian
    Dec 4, 2012 at 16:30
  • 3
    If OP is worried about unnecessary nodes, then it should probably be noted that .innerHTML will create empty text nodes to represent white space, whereas you wouldn't likely create those with DOM methods. Like: '<div id="hello"> <a>world</a> </div>' which creates 5 nodes instead of the expected 3. Dec 4, 2012 at 16:53
  • 1
    @user1689607 great tip, I have added it in my answer.
    – Esailija
    Dec 4, 2012 at 16:56
4

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

4
  • exactly! this should be the answer to the question.
    – GottZ
    Dec 4, 2012 at 16:26
  • 1
    Agreed, but I don't think the OP is trying to avoid "creating nodes" (your second sentence)
    – Ian
    Dec 4, 2012 at 16:29
  • @Ian, I think the OP is. Otherwise, what does "garbage" mean in the question, and why the statement about memory consumption?
    – bfavaretto
    Dec 4, 2012 at 16:33
  • I think they mean the "memory consumption" necessary for creating nodes explicitly (instead of the magic by innerHTML). As I re-read the question, I see what you mean, nevermind :)
    – Ian
    Dec 4, 2012 at 17:12
1

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"
2
  • I think you misunderstood, "a_html_string" is a html string, as it says :-)
    – Christophe
    Dec 4, 2012 at 16:24
  • "a_html_string" is "a_html_string" , then he should have written variable called a_html_string
    – karaxuna
    Dec 4, 2012 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.