Поэтому я хочу написать текст внутри элемента входного значения и сделать другой узел справа от текста. Но этот текст просто показывает [объект HTMLParagraphElement] рядом с текстом на входе, почему он не показывает текст?
Я не знаю, что я делаю неправильно, пожалуйста, помогите мне!
поэтому текст с ввода показан, но не другой элемент p, который я сделал?
Вот код:
var lista = document.getElementById("lista");
var li = document.createElement("li");
var del = document.createElement("p");
var delt = document.createTextNode("remove this");
del.appendChild(delt);
var item = document.getElementById("item");
var text = document.createTextNode(item.value + " | " + del);
li.appendChild(text);
lista.appendChild(li);
Измените свой код, чтобы использовать del.innerHTML.
var text = document.createTextNode(item.value + " | " + del.innerHTML);
аргумент document.createTextNode должен быть строкой. И innerHTML - это html-код объекта-элемента.
проблема - это линия
var text = document.createTextNode(item.value + " | " + del);
в это время "del" ссылается на элемент абзаца, вы можете иметь "del.innerHtml" вместо "del",
Вам не нужно создавать текстовые узлы для добавления текста. Просто установите innerHTML на элементы, которые вы создаете:
var myPar = document.createElement('p');
myPar.innerHTML = "remove this";
li.innerHTML = myPar.outerHTML; //this would be the tag and its text <p>remove this</p>
// other code here.
Демо- скрипт
HTML:
<ul id="lista"></ul>
Js:
// EXAMPLE!
var lista = document.getElementById("lista");
var item = document.getElementById("item");
for(var i=0;i<100;i++){
var li = document.createElement("li");
var del = document.createElement("p");
del.innerHTML = 'Remove this';
li.appendChild( del );
lista.appendChild(li);
}