Javascript efficiency improvement on appendChild Method - Stack Overflow

admin管理员组

文章数量:1023838

I want to alter the following Java script to make it more efficient

for(var i = 0; i < 1000; i += 1){
                var el = document.createElement('div');
                el.appendChild(document.createTextNode('Node ' + (i + 1)));
                document.getElementById('nodeHolder').appendChild(el);
}

Ideally it would be grateful if the reason behind it could be provided.

Any idea would be very much appreciated.

I want to alter the following Java script to make it more efficient

for(var i = 0; i < 1000; i += 1){
                var el = document.createElement('div');
                el.appendChild(document.createTextNode('Node ' + (i + 1)));
                document.getElementById('nodeHolder').appendChild(el);
}

Ideally it would be grateful if the reason behind it could be provided.

Any idea would be very much appreciated.

• javascript
• appendchild

Share Improve this question Follow edited Aug 16, 2011 at 1:57 Pingpong asked Aug 16, 2011 at 1:47 PingpongPingpong 8,0572424 gold badges101101 silver badges229229 bronze badges 1

• 1 You can also create a single div and clone it instead of using createElement numerous times. It's usually much faster. – RobG Commented Aug 16, 2011 at 3:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Create a document fragment and append to that, then do a single append for the entire set.

var frag = document.createDocumentFragment();

for(var i = 0; i < 1000; i += 1){
    var el = document.createElement('div');
    el.appendChild(document.createTextNode('Node ' + (i + 1)));
    frag.appendChild(el);
}

document.getElementById('nodeHolder').appendChild( frag );

Now your getElementById only needs to run once, and the DOM only needs to update once.

The document fragment is a generic container. When appending it to the DOM, the container just disappears, and only its content is appended.

---

You can condense the code a bit if you like:

Example: http://jsfiddle/7hagb/

var frag = document.createDocumentFragment();

for(var i = 0; i < 1000; i += 1){
    frag.appendChild(document.createElement('div'))
        .appendChild(document.createTextNode('Node ' + (i + 1)));
}

document.getElementById('nodeHolder').appendChild( frag );

---

Additionally, a very minor optimization would be to get rid of the i + 1, and modify the for loop to provide the values you want.

Example: http://jsfiddle/7hagb/1/

var frag = document.createDocumentFragment();

for(var i = 1; i <= 1000; i += 1){
    frag.appendChild(document.createElement('div'))
        .appendChild(document.createTextNode('Node ' + i));
}

document.getElementById('nodeHolder').appendChild( frag );

You can use DocumentFragment, a lightweight node container which prevents DOM from refreshing and reflowing when you append nodes on it.

var nodeHolder = document.createElement('div'),
    fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i ++ ) {
    var el = document.createElement('div');
    el.innerHTML = 'Node ' + (i + 1);
    fragment.appendChild(el);
}
nodeHolder.appendChild(fragment);

do not use DOM, just use html instead. for example instead of createElement use

  abc = ""
  for(...){
  abc += "<div>Text " + i + "</div>";
  }

and then append to the target. It is ugly, I agree, but should run much faster

I want to alter the following Java script to make it more efficient

for(var i = 0; i < 1000; i += 1){
                var el = document.createElement('div');
                el.appendChild(document.createTextNode('Node ' + (i + 1)));
                document.getElementById('nodeHolder').appendChild(el);
}

Ideally it would be grateful if the reason behind it could be provided.

Any idea would be very much appreciated.

I want to alter the following Java script to make it more efficient

for(var i = 0; i < 1000; i += 1){
                var el = document.createElement('div');
                el.appendChild(document.createTextNode('Node ' + (i + 1)));
                document.getElementById('nodeHolder').appendChild(el);
}

Ideally it would be grateful if the reason behind it could be provided.

Any idea would be very much appreciated.

• javascript
• appendchild

Share Improve this question Follow edited Aug 16, 2011 at 1:57 Pingpong asked Aug 16, 2011 at 1:47 PingpongPingpong 8,0572424 gold badges101101 silver badges229229 bronze badges 1

• 1 You can also create a single div and clone it instead of using createElement numerous times. It's usually much faster. – RobG Commented Aug 16, 2011 at 3:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Create a document fragment and append to that, then do a single append for the entire set.

var frag = document.createDocumentFragment();

for(var i = 0; i < 1000; i += 1){
    var el = document.createElement('div');
    el.appendChild(document.createTextNode('Node ' + (i + 1)));
    frag.appendChild(el);
}

document.getElementById('nodeHolder').appendChild( frag );

Now your getElementById only needs to run once, and the DOM only needs to update once.

The document fragment is a generic container. When appending it to the DOM, the container just disappears, and only its content is appended.

---

You can condense the code a bit if you like:

Example: http://jsfiddle/7hagb/

var frag = document.createDocumentFragment();

for(var i = 0; i < 1000; i += 1){
    frag.appendChild(document.createElement('div'))
        .appendChild(document.createTextNode('Node ' + (i + 1)));
}

document.getElementById('nodeHolder').appendChild( frag );

---

Additionally, a very minor optimization would be to get rid of the i + 1, and modify the for loop to provide the values you want.

Example: http://jsfiddle/7hagb/1/

var frag = document.createDocumentFragment();

for(var i = 1; i <= 1000; i += 1){
    frag.appendChild(document.createElement('div'))
        .appendChild(document.createTextNode('Node ' + i));
}

document.getElementById('nodeHolder').appendChild( frag );

You can use DocumentFragment, a lightweight node container which prevents DOM from refreshing and reflowing when you append nodes on it.

var nodeHolder = document.createElement('div'),
    fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i ++ ) {
    var el = document.createElement('div');
    el.innerHTML = 'Node ' + (i + 1);
    fragment.appendChild(el);
}
nodeHolder.appendChild(fragment);

do not use DOM, just use html instead. for example instead of createElement use

  abc = ""
  for(...){
  abc += "<div>Text " + i + "</div>";
  }

and then append to the target. It is ugly, I agree, but should run much faster

本文标签： Javascript efficiency improvement on appendChild MethodStack Overflow