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的跟随屏幕滚动代码
Jul 24 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
Seajs的学习笔记
Mar 04 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
理解JavaScript事件对象
Jan 25 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
vue写一个组件
2018/04/09 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
python中import reload __import__的区别详解
2017/10/16 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python selenium firefox使用详解
2019/02/26 Python
python常用函数与用法示例
2019/07/02 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
奥地利网上书店:Weltbild
2017/07/14 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
介绍一下.net和Java的特点和区别
2012/09/26 面试题
八一演出活动方案
2014/02/03 职场文书
求职信怎么写
2014/05/23 职场文书
六查六看六改心得体会
2014/10/14 职场文书
婚礼答谢词
2015/01/04 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers