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

Question

下面的appendChild/嵌套代码有没有更高效的写法？

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 的最后一个子节点之后再次插入相同的节点......它本身!当然，您不能让一个节点成为它自己的 child 。

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

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;