Странная ошибка при добавлении элементов в 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() 
));