JQuery在页面中添加和除移DOM示例代码


Posted in Javascript onJune 24, 2013

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>
Javascript 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 #Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 #Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 #Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 #Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 #Javascript
jquery可见性过滤选择器使用示例
Jun 24 #Javascript
jquery子元素过滤选择器使用示例
Jun 24 #Javascript
You might like
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
用于table内容排序
2006/07/21 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
python模拟enum枚举类型的方法小结
2015/04/30 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
浅析Python四种数据类型
2018/09/26 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
行政管理人员精品工作推荐信
2013/11/04 职场文书
实习评语
2013/12/16 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
消防演习通知
2015/04/25 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
Python字典的基础操作
2021/11/01 Python
原生JS实现分页
2022/04/19 Javascript