奇怪的錯誤在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() 
));