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 相关文章推荐
js验证是否为数字的总结
Apr 14 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
Vue.js用法详解
Nov 13 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
初学Javascript的一些总结
2008/11/03 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
scrapy爬虫完整实例
2018/01/25 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
序列化Python对象的方法
2020/08/01 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
采购经理岗位职责
2014/02/16 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
先进工作者申报材料
2014/12/23 职场文书
教师节慰问信
2015/02/15 职场文书
办公室禁烟通知
2015/04/23 职场文书
让子弹飞观后感
2015/06/11 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
php访问对象中的成员的实例方法
2021/11/17 PHP