The most efficient way to create and nest divs with appendChild using * plain * javascript (no libraries)

Question

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");

Answer 1

Well, the question has changed. Blah. Here is the new answer:

You can improve performance a bit by building a branch before adding it to the DOM tree (the browser will not try to redo anything during construction). And a little in the way of service efficiency, reducing the number of unnecessary 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 are trying to insert the same element twice in the same place ...

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

... , . , . :

docBody.appendChild(newNode);

. node , sasDomHider... ! , node .

, :

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;

Answer 2

, newNode HtmlElement, DOM. ( cloneNode, , ).

-

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.

Answer 3

:

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);

Answer 4

( / ), :

// 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);

• document.body
• .
• getElementById, ,
• id , setAttribute,
• , , , /reflow
• d document: ,
• docBody,

Answer 5

, innerHTML HTML.

.

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

Answer 6

, newNode, sasDomHider sasDom, , DOM. . <span> . id ( id , ).