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获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 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 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
详解Python的三种拷贝方式
2020/02/11 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
个人自我鉴定
2013/11/07 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL