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实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
jquery队列函数用法实例
Dec 16 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
js中switch语句的学习笔记
Mar 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的FTP学习(二)
2006/10/09 PHP
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
Python KMeans聚类问题分析
2018/02/23 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
如何用python整理附件
2018/05/13 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
使用python计算三角形的斜边例子
2020/04/15 Python
python中str内置函数用法总结
2020/12/27 Python
python实现学生通讯录管理系统
2021/02/25 Python
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
服务行业个人求职的自我评价
2013/12/12 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android