使用 appendChild() 将 TextNode 添加到 HTML 元素

Question

我正在尝试创建一个简单的“购物清单”，用户输入商品名称，然后单击“添加到列表”按钮将商品添加到列表中，它将以有序列表的方式显示。 我为添加到列表中的每个项目创建一个li元素，然后通过.innerText添加来自用户的输入值，然后从li创建一个 textNode ，然后将其 append 到sList以使其以有序列表的方式出现.

但是，我得到的 output 是[object HTMLLIElement]添加到sList ，它也没有排序。 我想我误解了一些关于节点的概念。 请问我在这里做错了什么？

<html>

<head>
    <title>Complete JavaScript Course</title>
    <style>
    </style>
</head>

<body>
    <div id="message">Complete JavaScript Course</div>
    <div>
        <input type="text" id="addItem">
        <input type="button" id="addNew" value="Add to List">
    </div>
    <div id="output">
        <h1>Shopping List</h1>
        <ol id="sList"> </ol>
    </div>
    <script>
        let button = document.querySelector("#addNew");
        button.addEventListener("click",addOne);
        function addOne(){
            let li = document.createElement("li");
            li.innerText = document.querySelector("#addItem").value;

            let node = document.createTextNode(li);
            document.getElementById("sList").appendChild(node);
        }
        
    </script>
</body>

</html>

Answer 1

您无需在此处创建文本节点

        function addOne(){
            let li = document.createElement("li");
            li.innerText = document.querySelector("#addItem").value;
            document.getElementById("sList").appendChild(li);
        }

 <html> <head> <title>Complete JavaScript Course</title> <style> </style> </head> <body> <div id="message">Complete JavaScript Course</div> <div> <input type="text" id="addItem"> <input type="button" id="addNew" value="Add to List"> </div> <div id="output"> <h1>Shopping List</h1> <ol id="sList"> </ol> </div> <script> let button = document.querySelector("#addNew"); button.addEventListener("click",addOne); function addOne(){ let li = document.createElement("li"); li.innerText = document.querySelector("#addItem").value; document.getElementById("sList").appendChild(li); } </script> </body> </html>

使用 appendChild() 将 TextNode 添加到 HTML 元素

问题描述

1 个解决方案

解决方案1
0 2022-08-10 10:16:17

使用 appendChild() 将 TextNode 添加到 HTML 元素

问题描述

1 个解决方案

解决方案1 0 2022-08-10 10:16:17

解决方案1
0 2022-08-10 10:16:17