使用*plain*javascript(无库)使用appendChild创建和嵌套div的最有效方法

Question

是否有更有效的方法来编写以下appendChild/nesting代码？

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

好的,问题已经改变了.等等.这是新的答案:

通过在将分支附加到DOM树之前构建分支,您可能会获得一点执行效率(浏览器在构建时不会尝试重新计算任何内容).通过减少多余变量的数量来节省维护效率:

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

原始答案:

你试图在同一个地方插入两次相同的元素......

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

...这是你在这段代码中创建元素的唯一地方.所以只创建了一个元素.然后在主体中的最后一个子元素之后插入它:

docBody.appendChild(newNode);

到现在为止还挺好.但是,你修改了一个属性,并尝试在sasDomHider的最后一个孩子之后再次插入同一个节点......这本身就是!当然,您不能将节点作为自己的子节点.

实际上,您只想创建一个新元素并使用它:

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;