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实例收集(20个)
Apr 21 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
javascript 常见功能汇总
Jun 11 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 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 生成饼图 三维饼图
2009/09/28 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
MSN消息提示类
2006/09/05 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
Javascript的闭包
2009/12/31 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
主要的Ajax框架都有什么
2013/11/14 面试题
大学同学聚会邀请函
2014/01/19 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android