jquery 添加节点的几种方法介绍


Posted in Javascript onSeptember 04, 2013
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQuery插入,复制、替换和删除节点</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
//几种添加节点的方法 
//$("p").append("<b>你好吗?</b>");//向p元素中追加《b》 
//$("<b>你好吗?</b>").appendTo("p");//将《b》追加到p元素中 
//$("p").prepend("<b>你好吗?</b>");//向p中前置《b》 
//$("<b>你好吗?</b>").prependTo("p");//将《b》前置到p元素中 
//$("p").after("<b>你好吗?</b>");//向p元素后插入《b》 
//$("<b>你好吗?</b>").insertAfter("p");//将《b》插入到p元素后边 
//$("p").before("<b>你好吗?</b>");//在p元素之前添加《b》 
//$("<b>你好吗?</b>").insertBefore("p");//将《b》插入到p元素前面 
//几种删除节点的方法 
//var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点 
//$("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去 
//$("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除 
//$("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容 
//复制节点 
/* $("ul li").click(function(){ 
$(this).clone(true).appendTo("ul");//复制当前点击的节点,并将它追加到《ul》元素中,当添加参数时复制它的事件 
}); 
*/ 
//替换节点 
// $("p").replaceWith("<strong>你最不喜欢的水果是?</Strong>"); 

}); 
</script> 
</head> 
<body> 
<p>你好!</p> 
你最喜欢的水果是? 
<ul> 
<li title="苹果">苹果</li> 
<li title="橘子">橘子</li> 
<li title="菠萝">菠萝</li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
微信小程序渲染性能调优小结
Jul 30 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 #Javascript
JScript分割字符串示例代码
Sep 04 #Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 #Javascript
JS实现图片横向滚动效果示例代码
Sep 04 #Javascript
javascript强大的日期函数代码分享
Sep 04 #Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 #Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 #Javascript
You might like
PHP实现动态柱状图改进版
2015/03/30 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
python在windows下实现备份程序实例
2014/07/04 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
python3 shelve模块的详解
2017/07/08 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
个人求职信范文分享
2013/12/13 职场文书
出纳员岗位责任制
2014/02/11 职场文书
贷款担保书范文
2014/05/13 职场文书
世博会口号
2014/06/20 职场文书
政府四风问题整改措施
2014/10/04 职场文书
六一儿童节开幕词
2015/01/29 职场文书
涨价通知怎么写
2015/04/23 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
python双向链表实例详解
2022/05/25 Python