节点的插入之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 相关文章推荐
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
vue中 this.$set的用法详解
Sep 06 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 ci框架验证码实例分析
2013/06/26 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
Sea.JS知识总结
2016/05/05 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
python实时分析日志的一个小脚本分享
2017/05/07 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
python selenium firefox使用详解
2019/02/26 Python
python实现PCA降维的示例详解
2020/02/24 Python
详解Python中namedtuple的使用
2020/04/27 Python
Python如何执行系统命令
2020/09/23 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
用Python 执行cmd命令
2020/12/18 Python
如何利用python 读取配置文件
2021/01/06 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
中考冲刺决心书
2014/03/11 职场文书
工作分析计划书
2014/04/30 职场文书
国家助学金感谢信
2015/01/21 职场文书
朋友聚会开场白
2015/06/01 职场文书
党校培训学习心得体会
2016/01/06 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python