Question

我试图在JavaScript中追加一个元素时遇到了问题，我得到的错误看起来有点像这样：

未捕获的TypeError：无法在appendChild上执行Node：参数1的类型不属于Node。

我也在使用名为framework的{{1}}，因此您知道

这是浏览器不满意的代码：

Interact.js

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。

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中追加元素时出现奇怪错误

2 个答案: