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

Question

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

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

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