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 相关文章推荐
通过javascript设置css属性的代码
Dec 28 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
node.js中的console用法总结
Dec 15 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
vue实现移动端省市区选择
Sep 27 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.MVC的模板标签系统(二)
2006/09/05 PHP
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
python实现简单猜单词游戏
2020/12/24 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
职高毕业生自我鉴定
2013/10/21 职场文书
装饰活动策划方案
2014/02/11 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
学生会部长竞选稿
2015/11/19 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB