javascript 添加li

首先，我们将在HTML代码中添加一个ul元素来表示我们的列表:

ul id="myList">
    li>
    第一项/li>
    li>
    第二项/li>
    li>
    第三项/li>
    /ul>
    

下面的JavaScript代码展示了如何向列表中添加一个新的li元素：

// 获取现有的列表var list = document.getElementById("myList");
    // 创建新的li元素var newItem = document.createElement("li");
    // 给新元素设置文本var textnode = document.createTextNode("新的列表项");
    newItem.appendChild(textnode);
    // 将新的元素添加到现有列表的末尾list.appendChild(newItem);
    

现在，如果我们运行这段代码，新的列表项将会被添加到现有列表的末尾。

当然，我们也可以添加一些样式来改变新元素的外观：

// 创建新的li元素var newItem = document.createElement("li");
    // 给新元素添加一些样式newItem.style.color = "red";
    newItem.style.fontWeight = "bold";
    // 给新元素设置文本var textnode = document.createTextNode("新的列表项");
    newItem.appendChild(textnode);
    // 将新的元素添加到现有列表的末尾list.appendChild(newItem);
    

现在，新的列表项将显示为加粗红色字体。

有时候，我们需要向列表的开头添加新的元素，这时可以使用insertBefore方法。下面是一个例子：

// 获取现有的列表var list = document.getElementById("myList");
    // 创建新的li元素var newItem = document.createElement("li");
    // 给新元素添加一些样式newItem.style.color = "red";
    newItem.style.fontWeight = "bold";
    // 给新元素设置文本var textnode = document.createTextNode("新的列表项");
    newItem.appendChild(textnode);
    // 将新的元素添加到现有列表的开头list.insertBefore(newItem, list.childNodes[0]);
    

这段代码将创建一个新的li元素，给它添加样式和文本，并将其添加到现有列表的开头。

总之，通过JavaScript向列表添加li元素可以是一个非常有用的任务。我们可以使用createElement方法来创建新的元素，然后使用appendChild方法将其添加到列表的末尾，或者使用insertBefore方法将其添加到列表的开始。这种方法可以大大简化我们在前端开发中的工作。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！