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 问答知识整理
Feb 11 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
Layui表格监听行单双击事件讲解
Nov 14 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
vue的项目如何打包上线
Apr 13 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
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
js 函数的副作用分析
2011/08/23 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
js模糊查询实例分享
2016/12/26 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
2014年党总支工作总结
2014/12/18 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
刑事法律意见书
2015/06/04 职场文书
培训班开班主持词
2015/07/02 职场文书
高中生军训感言
2015/08/01 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
CSS完成视差滚动效果
2021/04/27 HTML / CSS