jquery 插入li

原创

mob64ca12da726f 2024-02-15 06:22:39 ©著作权

文章标签 jQuery jquery html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12da726f的原创作品，请联系作者获取转载授权，否则将追究法律责任

jquery插入li

介绍

在网页开发中，经常需要在列表中动态插入新的列表项（li）。使用jQuery库提供的方法可以轻松实现这个功能。本文将介绍如何使用jQuery的方法插入新的li，并提供代码示例。

准备工作

在使用jQuery之前，需要先引入jQuery库。可以通过以下方式引入：

<script src="

在HTML文件中的<head>标签中添加上述代码，即可引入jQuery库。

插入li

要在列表中插入新的li，首先需要选中目标列表。可以通过各种选择器选中要插入的列表，如通过ID选中：

var targetList = $("#target-list");

这样就选中了ID为target-list的列表。

接下来，可以使用jQuery的append方法向选中的列表末尾插入新的li。append方法可以接受HTML字符串作为参数，用于创建新的li标签：

targetList.append("<li>New Item</li>");

这样就在目标列表的末尾插入了一个新的li。

如果要插入多个li，可以将它们放在一个HTML字符串中，使用append方法插入：

var newItems = "<li>Item 1</li><li>Item 2</li><li>Item 3</li>";
targetList.append(newItems);

这样就在目标列表的末尾插入了三个新的li。

如果想在列表的开头插入新的li，可以使用prepend方法代替append方法：

targetList.prepend("<li>New Item</li>");

这样就在目标列表的开头插入了一个新的li。

示例代码

以下是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Insert li with jQuery</title>
    <script src="
</head>
<body>
    <ul id="target-list">
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>

    <script>
        var targetList = $("#target-list");
        targetList.append("<li>New Item</li>");

        var newItems = "<li>Item 1</li><li>Item 2</li><li>Item 3</li>";
        targetList.append(newItems);

        targetList.prepend("<li>New Item</li>");
    </script>
</body>
</html>

将上述代码保存为一个HTML文件，通过浏览器打开该文件，就可以看到插入新的li的效果。