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