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

Question

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

这是我的实际代码。我将querySelector与现有的 ul标签的id配合使用，并使用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 AddLi(str)
{
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(str))
    li.innerHTML += ' <button onclick="this.parentNode.remove()">-</button>';
    document.getElementById("out").appendChild(li);
}

<form>
    <input type="text" name="userinput">
    <input type="button" value="Add LI" onclick="AddLi(userinput.value)">
</form> 
<span id="out"/>

Answer 2

我想这就是您想要的：

(function () {
  document.querySelector('#add').addEventListener('click', function () {
    let input = document.querySelector('#text');
    let list = document.querySelector('#list'); 
    
    let item = document.createElement('li'); // create li node
    let itemText = document.createTextNode(input.value); // create text node
    
    item.appendChild(itemText); // append text node to li node
    list.appendChild(item); // append li node to list
    
    input.value = ""; // clear input
  });
})();

<div>
  <input id="text" type="text" />
  <button id="add">Add</button>
</div>

<ul id="list">
  <li>example item</li>
</ul>

但是，请在将来提出更具体的问题。我什至不知道您的问题是什么，因为您没有提供所有代码。同样，您的问题的最后一句话告诉我没有什么用（..“我希望按钮可以正常工作，并通过单击按钮（带有键入的信息）在页面上显示元素” ..）。

Answer 3

尝试

function addBook(book) {
  list.innerHTML += 
    `<li>${esc(book.value)} <button onclick="del(this)">Del</button></li>`;
  book.value = '';
}

function del(item) {
  item.parentNode.remove();
}

function esc(s) {
    return s.replace(/[&"<>]/g,c => 
      ({'&':"&amp;",'"':"&quot;",'<': "&lt;",'>':"&gt;"}[c]));
}

<ul id="list"></ul>

<input id="data" type="text" />
<button onclick="addBook(data)">Add</button>