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 相关文章推荐
javascript json 新手入门文档
Dec 03 Javascript
jQuery的三种$()
Dec 30 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
php类自动加载器实现方法
2015/07/28 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
详解js闭包
2014/09/02 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
vue-swiper的使用教程
2018/08/30 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
python实现TF-IDF算法解析
2018/01/02 Python
python实现自动化上线脚本的示例
2019/07/01 Python
详解Python中的分支和循环结构
2020/02/11 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
python反扒机制的5种解决方法
2021/02/06 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
.NET现在共支持多少种语言
2014/02/26 面试题
新员工欢迎词
2014/01/12 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
导师鉴定意见
2015/06/05 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers