奇怪的错误在JavaScript

Question

附加元素时

我已经得到尝试的元素在JavaScript追加时出了问题，我已经得到的错误看起来有点像这样：

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

我也通过使用framework称为Interact.js只是让你知道

这里的代码peice的浏览器不开心：

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的。

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() 
));