JQuery在页面中添加和除移DOM示例代码
更新时间：2013年06月24日 17:58:33 作者：
本文为大家介绍下使用JQuery实现在页面中添加和除移DOM主要使用了以下几个方法，感兴趣的朋友可以了解下哈，希望对大家有所帮助
1.before（）:将新节点添加到前面
2.after（）:将节点添加到低部
3.prepend（）:把节点变成第一个节点
4.append（）:把新节点添加到末端,与appendTo（）效果相同，只是语法上有差异
5.remove()：除移节点
示例：
<ul>
<li class="vacation">
<h2>Hawaiian Vac</h2>
<button>Get Price</button>
</li>
</ul>
实现：
<script type="text/javascript">
$(document).ready(function () {
$('.vacation').before(price); //将新节点添加到前面
$('.vacation').after(price);//将节点添加到低部
$('.vacation').prepend(price); //把节点变成<li>的第一个节
var price = $('<p>From $399.99</p>'); //在JQuery中创建一个dom
//$('.vacation').append(price); //把新节点添加到末端,等于price.appendTo($('.vacation'));，语法不同
price.appendTo($('.vacation'));//把新节点添加到末端
$('button').remove(); //除移节点
});
</script>
2.after（）:将节点添加到低部
3.prepend（）:把节点变成第一个节点
4.append（）:把新节点添加到末端,与appendTo（）效果相同，只是语法上有差异
5.remove()：除移节点
示例：
复制代码 代码如下:
<ul>
<li class="vacation">
<h2>Hawaiian Vac</h2>
<button>Get Price</button>
</li>
</ul>
实现：
复制代码 代码如下:
<script type="text/javascript">
$(document).ready(function () {
$('.vacation').before(price); //将新节点添加到前面
$('.vacation').after(price);//将节点添加到低部
$('.vacation').prepend(price); //把节点变成<li>的第一个节
var price = $('<p>From $399.99</p>'); //在JQuery中创建一个dom
//$('.vacation').append(price); //把新节点添加到末端,等于price.appendTo($('.vacation'));，语法不同
price.appendTo($('.vacation'));//把新节点添加到末端
$('button').remove(); //除移节点
});
</script>
相关文章
jquery动态创建页面元素，mark一下，以备以后查询时使用。以创建div和input为例。2010-12-12
这篇文章主要为大家详细介绍了jquery submit()不能提交表单的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
下面小编就为大家带来一篇浅谈jquery设置和获得checkbox选中的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了谈谈jQuery之Deferred源码剖析,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
本篇文章主要是对jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了jQuery简单判断值是否存在于数组中的方法,涉及jQuery数组遍历及基于$.inArray的元素判断相关操作技巧,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了jQuery插件实现文件上传功能，可支持拖拽文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
下面小编就为大家带来一篇JQuery 设置checkbox值二次无效的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
本篇文章主要是对jquery遍历checkbox的注意事项进行了说明介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。这篇文章主要介绍了DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）,需要的朋友可以参考下2016-11-11
最新评论