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插件zTree实现更新根节点中第i个节点名称的方法示例
这篇文章主要介绍了jQuery插件zTree实现更新根节点中第i个节点名称的方法,结合实例形式分析了树形插件zTree针对节点的更新操作相关技巧,需要的朋友可以参考下2017-03-03
jQuery:节点(插入,复制,替换,删除)操作，需要的朋友可以参考一下2013-03-03
本文主要介绍了JQuery的基本知识，如：JQuery的dom操作，动态创建dom节点，删除节点，document方法等等，文章篇尾处附上实例小练习。需要的朋友可以参考下2016-12-12
这篇文章主要介绍了jQuery实现可拖拽的许愿墙效果,可实现拖拽图片与层叠显示功能,涉及jQuery插件的简单使用,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jquery移动端TAB触屏切换实现效果案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-10-10
这篇文章主要介绍了jQuery-mobile事件监听与用法,结合实例形式分析了jQuery-mobile各种常见事件类型与使用技巧,需要的朋友可以参考下2016-11-11
EasyUI Datebox 日期验证之开始日期小于结束时间
这篇文章主要介绍了EasyUI Datebox 日期验证之开始日期小于结束时间,需要的朋友可以参考下2017-05-05
jQuery EasyUI 折叠面板accordion的使用实例(分享)
下面小编就为大家分享一篇jQuery EasyUI 折叠面板accordion的使用实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了jquery实现顶部向右伸缩的导航区域代码,涉及jquery鼠标click点击事件及页面元素动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
本文给大家展示50个jquery代码片段，这些代码能够给你的javascript项目提供帮助，需要的朋友快来学习一下吧2015-08-08
最新评论