gpt4 book ai didi

javascript - 为什么添加的新列表项不显示在单独的行上?

转载 作者:行者123 更新时间:2023-12-01 01:43:42 25 4
gpt4 key购买 nike

这是一个基本的待办事项列表代码,在功能部分中只有一个添加项目的功能,但是每当我添加一个项目时,它们就会显示在同一行上,彼此相邻,而且也没有任何项目符号点。不明白为什么(网络开发新手) image inserted to illustrate

相关 HTML:

<body>
<h1>
<strong>TO DO LIST</strong>
</h1>
<input type="text" id="newitem" placeholder="enter item name">
<button id="btn" type="button" onclick="add();" >ADD ITEM</button>
<h2>
undone: <br>click on required items to move them to done list
</h2>
<ul id="dolist">

</ul>
<h2>
done: <br>click on required items to move them back to undone list
</h2>
<ul id="donelist">


</ul>

<script type="text/javascript" src="jsfunc.js"></script>
</body>

`javascript:

var dolist=document.getElementById('dolist');
function add()
{
var item=document.createElement("item");
var val=document.getElementById("newitem").value;

var t=document.createTextNode(val);
item.appendChild(t);
dolist.appendChild(item);

}

最佳答案

您可能指的是 li 而不是 itemitem 不是有效的 HTML 元素,而 li 表示列表项 - 对于有序列表 ol 和无序列表 ul > 一样。

var dolist = document.getElementById('dolist');

function add() {
var item = document.createElement("li");
var val = document.getElementById("newitem").value;

item.textContent = val;
dolist.appendChild(item);
}
<h1>
<strong>TO DO LIST</strong>
</h1>
<input type="text" id="newitem" placeholder="enter item name">
<button id="btn" type="button" onclick="add();">ADD ITEM</button>

<h2>
undone: <br>click on required items to move them to done list
</h2>
<ul id="dolist">
</ul>

<h2>
done: <br>click on required items to move them back to undone list
</h2>
<ul id="donelist">
</ul>

关于javascript - 为什么添加的新列表项不显示在单独的行上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52141284/

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