博主信息
博文 22
粉丝 0
评论 0
访问量 31993
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jQuery中添加与删除元素
kiimi的博客
原创
1092人浏览过
我们可以使用jQuery方便的添加或删除元素。

1、使用jQuery生成新元素,生成新元素的方法,比如,我要生成一个有序列表的标签,只需要:
var ol = $('<ol></ol>');
即可

2、append()方法:
在元素的的内容后面添加元素

我们可以使用jQuery来添加元素,上面的例子中只有一个ol标签肯定是不行的,还需要给里面添加li标签,这时候就可以使用:

        ol.append($('<li>瓦尔登湖</li>'));
        ol.append($('<li>小王子</li>'));
        ol.append($('<li>西游记</li>'));

3、prepend() 方法:
在被选元素的内容前面添加元素:

现在又有一个新的需求,需要给ol标签的最前面添加一行列表,就可以使用prepend()方法:

        ol.prepend($('<li>水浒传</li>'));

4、before()方法:
在被选元素之前添加元素:

比如有一个img标签,要在img标签的前面添加一个p标签:
var p1 = $('<p>前面的段落</p>');
$("#img1").before(p1);

5、after()方法:
在被选元素之后添加元素:

同样的道理,在img标签的后面添加一个p标签:

var p2 = $('<p>后面的段落</p>');
$("#img1").after(p2);

6、删除HTML中的元素:
remove():
remove方法可以删除HTML中的元素,比如我想删除ol中的某一li标签,其添加的代码为:

var ol = $('<ol id="books"></ol>');
ol.append($('<li id="book2">瓦尔登湖</li>'));
ol.append($('<li>小王子</li>'));

那么删除id为book2的li的方法为:

$("#book2").remove();

7、清空元素:
empty():
empty方法可以清空HTML元素中的所有元素,比如清空ol中所有的元素:

 $("#books").empty();


本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学