在 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 returns 只有一个对象。所以不要使用 [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。

Answer 2

当您使用 jquery 标记问题时，您可以将代码压缩为：

var $newCont = $('<div>');
$('.text', event.relatedTarget).each(function() {
    $newCont.append($('<p>').append($(this).text())); 
})
$('#toolbar').append($newCont);

或者以函数式编程方式：

$('#toolbar').append($('<div>').append(
    $('.text', event.relatedTarget).map(function() {
        return $('<p>').append($(this).text()); 
    }).get()
));

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

Strange error when appending elements in JavaScript

javascript

jquery

appendchild