创建 <li> 并在其上添加用户输入的按钮

Question

练习说我的按钮（如提交）必须使用用户在input 标签中设置的信息，并创建一个以文本为内容的li 标签。这是我的第一个 JavaScript 类，所以我仍然不熟悉语法。

这是我的实际代码。我将 aquerySelector与id我现有的ul 标记一起使用，并使用 addEventListener 为单击操作创建事件。我不记得如何正确创建新的li 标签，也不知道如何使用内容作为它的信息。

let myElement = document.querySelector('#add-book');

myElement.addEventListener("click", (e) => {

if (e.target.classList == 'button-add') {

    let liElement = document.createElement('li');

    let content = document.appendChild(liElement);

    content.textContent();

    }

}); 

我希望按钮正常工作，并通过单击按钮（带有输入的信息）在页面中显示元素。

Answer 1

我想这就是你想要的：(function () {&nbsp; document.querySelector('#add').addEventListener('click', function () {&nbsp; &nbsp; let input = document.querySelector('#text');&nbsp; &nbsp; let list = document.querySelector('#list');&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; let item = document.createElement('li'); // create li node&nbsp; &nbsp; let itemText = document.createTextNode(input.value); // create text node&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; item.appendChild(itemText); // append text node to li node&nbsp; &nbsp; list.appendChild(item); // append li node to list&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; input.value = ""; // clear input&nbsp; });})();<div>&nbsp; <input id="text" type="text" />&nbsp; <button id="add">Add</button></div>但是，请在将来提出更具体的问题。我什至不知道您的问题是什么，因为您没有提供所有代码。此外，您问题的最后一句话根本没有告诉我任何有用的信息（..“我希望按钮正常工作，并通过单击按钮（带有输入的信息）在页面中显示元素”..）。<ul id="list">&nbsp; <li>example item</li></ul>

Answer 2

过于简化了，但是嘿，它有效：function AddLi(str){&nbsp; &nbsp; var li = document.createElement('li');&nbsp; &nbsp; li.appendChild(document.createTextNode(str))&nbsp; &nbsp; li.innerHTML += ' <button onclick="this.parentNode.remove()">-</button>';&nbsp; &nbsp; document.getElementById("out").appendChild(li);}<form>&nbsp; &nbsp; <input type="text" name="userinput">&nbsp; &nbsp; <input type="button" value="Add LI" onclick="AddLi(userinput.value)"></form>&nbsp;<span id="out"/>

Answer 3

试试function addBook(book) {&nbsp; list.innerHTML +=&nbsp;&nbsp; &nbsp; `<li>${esc(book.value)} <button onclick="del(this)">Del</button></li>`;&nbsp; book.value = '';}function del(item) {&nbsp; item.parentNode.remove();}function esc(s) {&nbsp; &nbsp; return s.replace(/[&"<>]/g,c =>&nbsp;&nbsp; &nbsp; &nbsp; ({'&':"&amp;",'"':"&quot;",'<': "&lt;",'>':"&gt;"}[c]));}<ul id="list"></ul><input id="data" type="text" /><button onclick="addBook(data)">Add</button>