JQuery动态添加元素

最新推荐文章于 2025-03-23 06:10:22 发布

EXSHUANG

最新推荐文章于 2025-03-23 06:10:22 发布

阅读量889

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.youkuaiyun.com/EXSHUANG/article/details/104495993

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用JQuery动态添加元素，包括先创建元素的壳子，然后通过<script>标签进行动态添加。重点强调了两个注意点：避免在添加元素时引入额外的空格以防止删除时产生不必要的#text元素；对于未来可能出现的元素，应该使用on方法将其事件绑定到父级元素上，以确保事件的正确触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态添加元素

1.先写个壳子

<div class="box">
    <input type="text" name="Jbox" class="inputbox">
    <img class="aj" src="../res/icon/add.png" style="margin:8px"/>
</div>

2.<script>动态添加

$('.aj').click(function() {
    $('.box').append("</br><input type='text' name='Jbox' class='inputbox'><img class='dj' src='../res/icon/delete.png' style='margin: 8px'/>");
        });

注意点一：

在添加新元素时最好不要加多余的字符（比如空格），否则如果后面要删除容易加入过多#text元素

注意点二用on给未来元素绑定事件

元素上绑定一个事件，那么这个元素必须先存在，也就是绑定事件动作前就已有这个元素。

如果是未来元素，就把事件绑在未来元素的父级上。

demo如下：

html部分代码

<ul class="AA">
    <li class="BB">php</li>
    <li class="BB">javascript</li>
</ul>
<button class="add"></button>

js部分代码

$('button.add').click(function(){
    $('<li class="BB"></li>').appendTo('ul.AA');

})

//给li绑定click事件
//记住不要把事件直接绑定在son元素上$('.BB').on('click',function(){})

$('.menu').on('click', '.BB', function(){
    alert('正在进入...');
})