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 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
使用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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
php中目录,文件操作详谈
2007/03/19 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
JavaScript 原型继承
2011/12/26 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
python GUI计算器的实现
2020/10/09 Python
python源文件的字符编码知识点详解
2021/03/04 Python
学习委员自我鉴定
2014/01/13 职场文书
大学秋游活动方案
2014/02/11 职场文书
护士求职信
2014/07/05 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
运动会通讯稿600字
2015/07/20 职场文书