节点的插入之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中parentNode,childNodes,children的应用详解
Dec 17 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
用p5.js制作烟花特效的示例代码
Mar 21 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
vue项目中微信登录的实现操作
Sep 08 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+JS实现的实时搜索提示功能
2018/03/13 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
简述vue中的config配置
2018/01/23 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python批量修改文件后缀示例代码分享
2013/12/24 Python
解读Python中degrees()方法的使用
2015/05/18 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
Python线程之定位与销毁的实现
2019/02/17 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
用python制作个视频下载器
2021/02/01 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
商超业务员岗位职责
2014/03/12 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
网络营销计划书
2015/01/17 职场文书
兴趣班停课通知
2015/04/24 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书