gpt4 book ai didi

javascript - 使用 javascript 创建一个新元素

转载 作者:太空宇宙 更新时间:2023-11-03 22:36:18 26 4
gpt4 key购买 nike

我正在尝试使用文本输入创建一个新的 li 元素。问题是当文本出现时,它不会创建我可以设置样式的实际 li 元素。文本在那里,但它只是彼此相邻地连续形成。这是我的 HTML:

const button = document.getElementById('submit');

button.addEventListener ("click", () => {
var taskInput = document.getElementById('task').value;
// Creating the text for list item.
if (taskInput === '') { // Prevents empty list item.
alert("You have to type a task!");
} else {
var listItem = document.createElement("li"); // Create li element.
var text = document.createTextNode(taskInput); // Create text for list item.
listItem.appendChild(text); // Append text to li element.
}

//Add new list item to list
var list = document.getElementById("list");
list.appendChild(text);

});

<body>
<h1>Start your list!</h1>
<div class="input">
<input type="text" id="task">
<button id="submit">Create</button>
</div>
<section id="list">
</section>
</body>

最佳答案

只需使用 <ul>而不是 <section>并附加到它 listeItem而不是 text .

const button = document.getElementById('submit');

button.addEventListener ("click", () => {
var taskInput = document.getElementById('task').value;
// Creating the text for list item.
if (taskInput === '') { // Prevents empty list item.
alert("You have to type a task!");
} else {
var listItem = document.createElement("li"); // Create li element.
var text = document.createTextNode(taskInput); // Create text for list item.
listItem.appendChild(text); // Append text to li element.
}

//Add new list item to list
var list = document.getElementById("list");
list.appendChild(listItem);

});
<body>
<h1>Start your list!</h1>
<div class="input">
<input type="text" id="task">
<button id="submit">Create</button>
</div>
<ul id="list">
</ul>
</body>

关于javascript - 使用 javascript 创建一个新元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46385850/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com