Question

你好，我刚刚开始学习，我正在尝试编写简单的代码以使用Java脚本向div框添加文本，但这给了我未定义的错误查询选择器

html代码：

    <h2>List of items</h2>
<input class="text" type="text" placeholder="write text"><br>
<input type="button" value="Add" onclick="addItem()">
<div class="list"></div>

java脚本代码：

function addItem(){
        let getText = querySelector("text").value;
        let newText = document.createElement("div");
        newText.innerHTML = document.appendChild("getText");
        document.querySelector("list").appendChild("newText");
    }

Answer 1

您的代码中存在几个问题：

querySelector是document对象的方法。应该是document.querySelector("selector")。
document.appendChild需要一个Node实例。您正在传递字符串。
您缺少类选择器的.。
在引用变量时，请勿使用""包裹变量。

这是更新的代码：

function addItem() {
   let getText = document.querySelector("input.text").value;
   let newText = document.createElement("div");
   newText.innerHTML = getText;
   document.querySelector(".list").appendChild(newText);
}

Answer 2

使用

document.querySelector("div.list").appendChild("newText");

代替

document.querySelector("list").appendChild("newText");

使用javascript将文本添加到div

2 个答案: