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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 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获取服务器时间的实现代码
2013/06/07 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
javascript 数组排序函数
2009/08/20 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
nodeJS微信分享
2017/12/20 NodeJs
详解webpack多页面配置记录
2018/01/22 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
python实现图片压缩代码实例
2019/08/12 Python
Python 实现自动导入缺失的库
2019/10/29 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
大学生入党自我鉴定
2013/10/31 职场文书
小学社会实践活动总结
2014/07/03 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
爱国主义影片观后感
2015/06/18 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python