javascript - 在 JavaScript 中追加元素时出现奇怪的错误

Question

我在 JavaScript 中尝试附加元素时遇到了问题，我遇到的错误看起来有点像这样:

Uncaught TypeError: Failed to execute appendChild on Node: parameter 1 is not of type Node.

我还使用了一个名为 Interact.js 的 framework 让你知道

这是浏览器不满意的一段代码:

var tempText = [];
var classNum = event.relatedTarget.getElementsByClassName('text');
var newCont = document.createElement('div');
for(var i = 0; i < classNum.length; i++){
    tempText.push(event.relatedTarget.getElementsByClassName('text')[i].textContent);
}
for(var i = 0; i < tempText.length; i++){
    var pText = document.createElement('p').appendChild(tempText);
    newCont.appendChild(pText[i]);

}

var placement = document.getElementById('toolbar')[0];
placement.appendChild(newCont);

Answer 1

我刚刚注意到一个小错误。 document.getElementById 仅返回一个对象。所以不要使用 [0]:

var placement = document.getElementById('toolbar'); // There is no [0]. Remove it.
placement.appendChild(newCont);

但是使用 jQuery 真的很容易完成整个事情。由于您可以使用 jQuery 解决方案，请继续阅读。请通过添加以下内容来包含 jQuery 库:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JavaScript 将是:

var tempText = [];
var classNum = event.relatedTarget.getElementsByClassName('text');
var newCont = document.createElement('div');
for (var i = 0; i < classNum.length; i++) {
  tempText.push(event.relatedTarget.getElementsByClassName('text')[i].textContent);
}
for (var i = 0; i < tempText.length; i++) {
  // Change here:
  var pText = $("<p />", {html: tempText});
  $(newCont).append(pText);
}

var placement = $('#toolbar');
placement.append(newCont);

由于我不知道底层的 HTML，所以我只是猜测并将一些转换为 jQuery。