如何在 JavaScript 中使用 createElement()？

Question

    var htmlComponent = [
                {
                    element : 'button',
                    text : "Addition"
                },
                {
                    element : 'h1',
                    text : "This is the heading"
                },
                {
                    element : 'p',
                    text : "This is the paragraph."
                }
            ];

    htmlComponent.forEach(function(item) {

          // Problem here

 document.body.appendChild(document.createElement(item.element).appendChild(document.createTextNode(item.text)));
    }

实际上我想使用 DOM 对象创建一个 html 元素，但这不起作用。我的意思是我的代码不能正常工作..

但是当我改变了类似的东西时：

htmlComponent.forEach(function(item) {
    var _element = document.createElement(item.element);
    var text = document.createTextNode(item.text);
   _element.appendChild(text);
    document.body.appendChild(_element);
}

那么代码就可以工作了。

这里的主要问题是为什么第二个代码可以工作而第一个代码不工作......我的代码有什么问题。

请解释一下…………

Answer 1

您正在将呼叫链接在一起，例如 body.createElement().appendChild()，而您不应该这样做。

这适用于createElement()，因为它返回您要附加到的元素，但不适用于appendChild()，因为它返回您刚刚附加的子元素，然后您将再次附加到body .

这种编程风格被称为“流畅”界面。一些库支持它，例如jQuery，但不是原生 Javascript DOM 函数。

见https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Answer 2

如下尝试

appendChild 不返回父级

var htmlComponent = [{
    element: 'button',
    text: "Addition"
  },
  {
    element: 'h1',
    text: "This is the heading"
  },
  {
    element: 'p',
    text: "This is the paragraph."
  }
];

htmlComponent.forEach(function(element) {

  var btn = document.createElement(element.element); 
  var t = document.createTextNode(element.text);
  btn.appendChild(t);
  document.body.appendChild(btn);

});

Answer 3

根据documentation for appendChild：

返回值是附加的孩子，除非给定的孩子 是DocumentFragment，在这种情况下，空的DocumentFragment 是 返回。

您正在将文本节点附加到按钮，然后尝试将返回的结果附加到正文。这就是为什么您没有看到按钮被附加到正文的原因。

如果你像这样分解它，更容易看到发生了什么：

document.body.appendChild(

   // createElement returns button
   document.createElement("button")

     // button.appendChild then returns the appended child (a text node)
     .appendChild(document.createTextNode("text"))
)