节点的插入之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 相关文章推荐
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
js实现分割上传大文件
Mar 09 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
JavaScript解析JSON数据示例
Jul 16 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
基于JavaScript实现随机点名器
Feb 25 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 预定义数组
2009/03/16 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
Python callable()函数用法实例分析
2018/03/17 Python
python opencv实现图像配准与比较
2021/02/09 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
促销活动总结
2014/04/28 职场文书
学习十八大的心得体会
2014/09/12 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
学校德育工作总结2015
2015/05/11 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
基于tensorflow权重文件的解读
2021/05/26 Python