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 页面自动加载事件详解
Feb 10 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
微信小程序实现登录注册功能
Dec 29 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 图片文件上传实现代码
2010/12/29 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
生产部管理制度
2014/01/31 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
欢迎标语大全
2014/06/21 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
vue+iview实现手机号分段输入框
2022/03/25 Vue.js