创建 <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 () {

  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 2

过于简化了，但是嘿，它有效：

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 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>