Javascript createElement和appendchild一步完成

Question

我想创建一个元素，然后在一步中将其与其他元素一起追加。

var header = document.createElement("thead").appendChild(document.createElement("tr"));

为什么此代码输出唯一的TR而不是Thead？

当我使用此代码时，它的正确（thead + tr就在那里）

var header = CH.createElement("thead");
    header.appendChild(CH.createElement("tr"));

Answer 1

因为Node.appendChild()会返回附加的孩子 ...

var appendedChild = element.appendChild(child);

..你可以简单地引用孩子的parentNode，如此（sample fiddle）：

var header = document.createElement("thead")
    .appendChild(document.createElement("tr"))
    .parentNode; // the row's parentNode, i.e.: thead

Answer 2

@antisanity有一个很好的解决方案。如果您的变量是预先声明的另一个解决方案就是这样做......

(header = document.createElement('thead'))
      .appendChild(document.createElement('tr'));

这可确保header的分配发生在.appendChild()之前。