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 相关文章推荐
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
JS中操作JSON总结
Dec 06 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
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
PHP5 安装方法
2007/01/15 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
php中session与cookie的比较
2015/01/27 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
js对象基础实例分析
2015/01/13 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
新电JAVA笔试题目
2014/08/31 面试题
造价工程师个人求职信
2013/09/21 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
工伤事故证明
2014/10/20 职场文书
团员个人总结
2015/02/26 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
英语投诉信范文
2015/07/03 职场文书
iPhone13再次曝光
2021/04/15 数码科技