Most efficient way to create and nest divs with appendChild using *plain* javascript (no libraries) - Stack Overflow

admin管理员组

文章数量:1340365

Is there a more efficient way to write the following appendChild / nesting code?

var sasDom, sasDomHider;
var d = document;
var docBody = d.getElementsByTagName("body")[0];
var newNode = d.createElement('span');
var secondNode = d.createElement('span');

// Hider dom
newNode.setAttribute("id", "sasHider");
docBody.appendChild(newNode);
sasDomHider = d.getElementById("sasHider");

// Copyier dom
secondNode.setAttribute("id", "sasText");
sasDomHider.appendChild(secondNode);
sasDom = d.getElementById("sasText");

Is there a more efficient way to write the following appendChild / nesting code?

var sasDom, sasDomHider;
var d = document;
var docBody = d.getElementsByTagName("body")[0];
var newNode = d.createElement('span');
var secondNode = d.createElement('span');

// Hider dom
newNode.setAttribute("id", "sasHider");
docBody.appendChild(newNode);
sasDomHider = d.getElementById("sasHider");

// Copyier dom
secondNode.setAttribute("id", "sasText");
sasDomHider.appendChild(secondNode);
sasDom = d.getElementById("sasText");

• javascript
• appendchild

Share Improve this question Follow edited Mar 13, 2017 at 19:01 Mithical 63411 gold badge1818 silver badges3030 bronze badges asked Apr 19, 2010 at 21:21 MatrymMatrym 17.1k3535 gold badges9999 silver badges141141 bronze badges 5

• jQuery is full of win for this type of work. – James Westgate Commented Apr 19, 2010 at 21:26
• 6 Thanks, I know, but I don't want to require the library for what is otherwise a 4kb script. I'd prefer for this to be independent. – Matrym Commented Apr 19, 2010 at 21:27
• Sure. And Im not arguing with you. But with all the cross browser testing, performance testing including now and with future versions of a web browser - is a 24kb download really that bad? – James Westgate Commented Apr 19, 2010 at 21:36
• 6 Don't let the jQuery zealots brainwash you. DOM scripting is NOT THAT HARD. – Tim Down Commented Apr 20, 2010 at 8:18
• I'm a massive fan of jQuery, but @Tim is right. – nickf Commented Apr 20, 2010 at 8:35

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 6

Ok, question has changed. Blah. Here's the new answer:

You might gain a little bit in the way of execution efficiency by building the branch before appending it to the DOM tree (browser won't try to recalc anything while building). And a bit in the way of maintenance efficiency by reducing the number of superfluous variables:

var d = document;
var docBody = d.getElementsByTagName("body")[0];
    
// Copyier dom
var sasDom = d.createElement('span');
sasDom.setAttribute("id", "sasText");

// Hider dom
var sasDomHider = d.createElement('span');
sasDomHider.setAttribute("id", "sasHider");

sasDomHider.appendChild(sasDom); // append child to parent
docBody.appendChild(sasDomHider); // ...and parent to DOM body element

---

Original answer:

You're trying to insert the same element twice, in the same spot...

var newNode = d.createElement('span');

...That's the only place you're creating an element in this code. So there's only one element created. And you insert it after the last child element in the body here:

docBody.appendChild(newNode);

So far, so good. But then, you modify an attribute, and try to insert the same node again, after the last child of sasDomHider... which is itself! Naturally, you cannot make a node its own child.

Really, you want to just create a new element and work with that:

newNode = d.createElement('span');
newNode.setAttribute("id", "sasText");
sasDomHider.appendChild(newNode);
// the next line is unnecessary; we already have an element reference in newNode
// sasDom = d.getElementById("sasText");
// ... so just use that:
sasDom = newNode;

You don't need to search again for the nodes:

var d = document;
var docBody = d.body;
var sasDomHider = d.createElement('span');
var sasDom = d.createElement('span');

// Hider dom
sasDomHider.setAttribute("id", "sasHider");
docBody.appendChild(sasDomHider);

// Copyier dom
sasDom.setAttribute("id", "sasText");
sasDomHider.appendChild(sasDom);

It's because newNode references an instance of a HtmlElement which you are attempting to insert into two different places within the DOM. You'll need to create a new element each time (or use cloneNode, but there are cross browser discrepancies with how that works).

Something like this should work

var sasDom,        
    d = document,
    docBody = d.getElementsByTagName("body")[0],
    sasDomHider = d.createElement('span');

// Hider dom
sasDomHider.setAttribute("id", "sasHider");
docBody.appendChild(sasDomHider);

// Copyier dom
sasDom = sasDomHider.cloneNode(true);
sasDom.setAttribute("id", "sasText");
sasDomHider.appendChild(sasDom);
// job done. sasDomHider and sasDom still reference the 
// created elements.

There are a few ways to make this more efficient (in terms of performance and code size/readability), most of which have been covered already:

// Hider dom
var sasDomHider = document.createElement('span');
sasDomHider.id = "sasHider";

// Copier dom
var sasDom = document.createElement('span');
sasDom.id = "sasText";

sasDomHider.appendChild(sasDom);
document.body.appendChild(sasDomHider);

• Obtains body using document.body
• Uses only one variable each for the nodes you've created
• Removes the getElementById lines, since they get you references to the same elements you had already
• Uses the id property of the elements rather than setAttribute, which is an unnecessary function call and more verbose
• Creates the whole branch being added to the document before adding it, thus avoiding unnecessary repaint/reflow
• Removes d as an alias for document: there's no need to keep another reference to the document hanging around
• Removes the docBody variable, since you're only using it once

Generally one set of the body's innerHTML with the desired HTML be the most efficient method.

e.g.

document.body.innerHTML = document.body.innerHTML + '<span id="foo"></span><span id="bar"></span>';

In your example, the objects referenced by newNode, sasDomHider, and sasDom are all the same, all pointing at a single DOM element. You're trying to put it in two places at once. You need to clone it, or simply make a new <span> for the second instance. Merely changing the id attribute is not enough (you're changing the id of the one already in the document).

本文标签：