JavaScript动态添加li标签并绑定点击事件

发表于2022-07-05更新于2022-07-05字数统计348阅读时长3分

需求

开发面包屑标签功能，点击面包屑的其中一个标签需要跳转到对应目录。

demo

实现

HTML

1
2
3
<div class="panel-heading" id="show">
    <ul class="breadcrumb" id="breadcrumbs"></ul>
</div>

JavaScript

创建一个函数，后面和点击事件绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function createLi(id, jQueryId) {
    $(jQueryId).html('');
    $.ajax({
        url: "getParentNodes",
        dataType: "json",
        traditional: true,
        //属性在这里设置
        method: "post",
        data: {
            "id": $('#treeNodeId').val()
        },
        success: function (data) {
            for (let i in data.rows) {
                let ele = document.createElement('li');
                ele.innerHTML = ['<a id="breadLink" href="#">' + data.rows[i].fileName + '</a>'].join('');
                ele.onclick = function () {
                    $('#treeNodeId').val(data.rows[i].id);
                    $("#table-detail").bootstrapTable("refresh");
                    createLi('breadcrumbs', '#breadcrumbs');
                }
                document.getElementById(id).appendChild(ele);
            }
        },
        error: function () {
            alert('请求失败');
        }
    });
}
  1. $(jQueryId).html('');最开始先清空所有li标签；
  2. 在本例子中，通过ajax查询数据；
  3. 拿到数据后，遍历所有数据，通过let ele = document.createElement('li');为每一条数据创建一个li对象，通过ele.innerHTML = ['<a id="breadLink" href="#">' + data.rows[i].fileName + '</a>'].join('');将li对象赋予链接属性，通过ele.onclick给每一个li绑定点击事件，最后通过document.getElementById(id).appendChild(ele);将一个li标签动态添加进去。