节点的插入之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代码
Oct 09 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
原生js实现密码强度验证功能
Mar 18 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
php之可变函数的实例详解
2017/09/13 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
jQuery的框架介绍
2016/05/11 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
django框架防止XSS注入的方法分析
2019/06/21 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
工业自动化毕业生自荐信范文
2014/01/04 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
补充协议书范本
2014/04/23 职场文书
班组建设经验交流材料
2014/05/12 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书