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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
JavaScript 常用函数库详解
Oct 21 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
python3简单实现微信爬虫
2015/04/09 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
Python中实现输入一个整数的案例
2020/05/03 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
python中reload重载实例用法
2020/12/15 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
验房委托书
2014/08/30 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
新闻稿怎么写
2015/07/18 职场文书
结婚幸福感言
2015/08/01 职场文书
详解OpenCV曝光融合
2022/04/29 Python