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

Question

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

这是我的实际代码。我将 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"/>