节点的插入之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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
React传值 组件传值 之间的关系详解
Aug 26 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 Session存储到Redis的方法
2013/11/04 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
python二叉树的实现实例
2013/11/21 Python
python书籍信息爬虫实例
2018/03/19 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python3常见函数range()用法详解
2019/12/30 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
幼儿园毕业家长感言
2014/02/10 职场文书
会计自荐信范文
2014/03/09 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
党支部三会一课计划
2014/09/24 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
Go语言实现Snowflake雪花算法
2021/06/08 Golang