节点的插入之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 获取表单file全路径
Dec 31 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
Vue.use源码分析
Apr 22 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 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代码
2012/07/17 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
php源码的安装方法和实例
2019/09/26 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
学生会主席演讲稿
2014/04/25 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
歌剧魅影观后感
2015/06/05 职场文书
鉴史问廉观后感
2015/06/10 职场文书