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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
jQuery实现动态向上滚动
Dec 21 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
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php自定义错误处理用法实例
2015/03/20 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
vue-axios使用详解
2017/05/10 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
个人银行贷款担保书
2014/04/01 职场文书
大连星海广场导游词
2015/02/10 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
Python中的xlrd模块使用整理
2021/06/15 Python