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 相关文章推荐
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 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
AM/FM收音机的安装与调试
2021/03/02 无线电
php自动获取目录下的模板的代码
2010/08/08 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
再谈javascript面向对象编程
2012/03/18 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
python关于变量名的基础知识点
2020/03/03 Python
python小白切忌乱用表达式
2020/05/29 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
浙大网新C/C++面试解惑
2015/05/27 面试题
电子商务专业个人的自我评价
2013/11/19 职场文书
小学生开学感言
2014/02/28 职场文书
广播节目策划方案
2014/05/23 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
心术观后感
2015/06/11 职场文书
处罚决定书范文
2015/06/24 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
Go 自定义package包设置与导入操作
2021/05/06 Golang
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技