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 Object创建一个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

尝试以下

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 2

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

这适用于createElement()，因为它会返回您想要追加的元素，但它不能与appendChild()一起使用，因为它会返回您刚刚追加的子项，然后再将其追加到body。

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

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

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")) ) 返回。

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

如果你这样打破它，就会更容易看到发生了什么：

object CSVDemo extends App {
  println("Month, Income, Expenses, Profit")
  val bufferedSource = io.Source.fromFile("/tmp/finance.csv")
  for (line <- bufferedSource.getLines) {
    val cols = line.split(",").map(_.trim)
    // do whatever you want with the columns here
    println(s"${cols(0)}|${cols(1)}|${cols(2)}|${cols(3)}")
  }
  bufferedSource.close
}

如何在JavaScript中使用createElement（）？

3 个答案: