一步创建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 （ 示例小提琴 ）：

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()之前。