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效率调优经验
Jun 04 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
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 MSSQL 存储过程的方法
2008/12/24 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php设计模式小结
2013/02/15 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
Python Flask框架扩展操作示例
2019/05/03 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
2014年党支部学习材料
2014/05/19 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
鼋头渚导游词
2015/02/05 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
golang定时器
2022/04/14 Golang
Android Studio 计算器开发
2022/05/20 Java/Android