节点的插入之append()和appendTo()的用法介绍


Posted in Javascript onJanuary 13, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>jquery</title> 
<script type="text/javascript" src="jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
$(function(){ 
//append()的用法 
//$("ul").append("<li title='abc'>hello</li>"); 
//$("ul").append("<li title='xyz'>world</li>"); 
//appendTo()的用法 
$("<li title='xyz'>hello</li>").appendTo($("ul")); 
}); 
</script> 
</head> 
<body> 
<p title="hello world">您认为圣思园培训好不好呢?</p> 
<ul> 
<li title="1">好</li> 
<li title="2">很好</li> 
<li title="3">非常好</li> 
<li title="4">特别好</li> 
<li title="5">太好了</li> 
<li title="6">好的无法描述了</li> 
</ul> 
</body> </html>

在已有的节点上操作
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>jquery4</title> 
<script type="text/javascript" src="jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
$(function(){ 
var li1 = $("<li title='abc'>hello</li>"); 
var li2 = $("<li title='abc'>world</li>"); 
var li3 = $("<li title='abc'>hello world</li>"); 
$("ul").append(li1); 
$("ul").prepend(li2); 
$("ul li:eq(4)").after(li3); }); 
</script> 
</head> 
<body> 
<p title="hello world">您认为圣思园培训好不好呢?</p> 
<ul> 
<li title="1">好</li> 
<li title="2">很好</li> 
<li title="3">非常好</li> 
<li title="4">特别好</li> 
<li title="5">太好了</li> 
<li title="6">好的无法描述了</li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
JavaScript设计模式初探
Jan 07 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
小程序实现列表多个批量倒计时
Jan 29 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
移动节点的jquery代码
Jan 13 #Javascript
删除节点的jquery代码
Jan 13 #Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 #Javascript
js实现的map方法示例代码
Jan 13 #Javascript
jquery教程ajax请求json数据示例
Jan 13 #Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 #Javascript
js判断是否为ie的方法小结
Jan 13 #Javascript
You might like
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
Node.js编码规范
2014/07/14 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
numpy.where() 用法详解
2019/05/27 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
台湾良兴购物网:EcLife
2019/12/01 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
项目计划书范文
2014/01/09 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
先进集体申报材料
2014/12/25 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
记者节感言
2015/08/03 职场文书
Python图片检索之以图搜图
2021/05/31 Python
Go语言实现Snowflake雪花算法
2021/06/08 Golang
Java并发编程必备之Future机制
2021/06/30 Java/Android
Nginx配置使用详解
2022/07/07 Servers