如何使用onclick中的函数将列表元素添加到现有的ul中?我需要把它加到这类名单上.

<ul id="list">
<li id="element1">One</li>
<li id="element2">Two</li>
<li id="element3">Three</li>
</ul> 

...另一个列表项的id为"element4",其下为文本"4".我试过这个功能,但它不起作用.

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Element 4"));
}

我不知道JQuery,所以请只给我Javascript.谢谢你!!

推荐答案

您没有将li作为子元素附加到ul元素

尝尝这个

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Four"));
  ul.appendChild(li);
}

如果需要设置id,可以通过

li.setAttribute("id", "element4");

将函数转换为

function function1() {
  var ul = document.getElementById("list");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Four"));
  li.setAttribute("id", "element4"); // added line
  ul.appendChild(li);
  alert(li.id);
}

Html相关问答推荐

迪夫导航栏的一些组件显示在导航栏之外,有人能帮助我解决这个问题吗?

传单自定义标记(divIcon)html/css不适用

如何让一个动态列表以网格方式水平显示

使用css第n个子元素,如何迭代Y组中的X个元素?

窗口视图之外的下拉菜单位置

我希望创建一个对角手风琴与不同的内容(文本和图像)在其正常状态和其他元素悬停

SVG动画只有在打开S开发工具的浏览器时才开始播放

在弹性框布局中的第n个元素后强制换行

如何删除FONT创建的文本下方的空格

为什么溢出时overflow: auto框的底部有一个小间隙?

我真的需要一个容器来让行和列正常工作吗? ( bootstrap 程序 v5)

在React中如何处理HTML本地日期输入?

如何使用动画拆分和对齐文本块

奇怪的幻影 div 命名为

按钮显示:内联不换行

如何动态调整彼此重叠的两个 div 的大小,使它们在增长时保持相同的高度

为四开本网站主页添加背景图片

圆形边框显示在该部分后面.怎么修?

如何向弹出窗口添加 sanitize: false 选项?

svg 内容超过元素