节点的插入之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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
javascript GUID生成器实现代码
Oct 31 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
angular+ionic返回上一页并刷新页面
Aug 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
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
PHP内置加密函数详解
2016/11/20 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
Bootstrap精简教程
2015/11/27 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
详解Python中find()方法的使用
2015/05/18 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
python实现人机猜拳小游戏
2020/02/03 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python实现动态循环输出文字功能
2020/05/07 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
干部下基层实施方案
2014/03/14 职场文书
药品业务员岗位职责
2014/04/17 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
中秋节祝酒词
2015/08/12 职场文书
环保建议书作文400字
2015/09/14 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python