Question

这是执行列表代码的基本方法，只是在功能部分添加了一项添加功能的功能，但是每当我添加一项功能时，它们就会显示在同一行上，彼此相邻且没有任何项目符号。无法理解为什么（Web开发的新手） 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);

}

Answer 1

您的意思可能是li而不是item。 item不是有效的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>

为什么没有添加新的列表项显示在单独的行上？

1 个答案: