节点的插入之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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
javascript继承机制实例详解
Nov 20 Javascript
JavaScript变量声明详解
Nov 27 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
移动节点的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中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
php处理复杂xml数据示例
2016/07/11 PHP
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
对于jQuery性能的一些优化建议
2015/08/13 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python Kmeans算法原理深入解析
2019/08/23 Python
Python中如何引入第三方模块
2020/05/27 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
生产部经理岗位职责
2013/12/16 职场文书
红色旅游心得体会
2014/09/03 职场文书
三方股份合作协议书
2014/10/13 职场文书
责任书格式
2015/01/29 职场文书
团队拓展训练心得体会
2016/01/12 职场文书