节点的插入之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中实现命名空间
Nov 23 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
vue使用openlayers实现移动点动画
Sep 24 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控制文件下载速度的方法
2015/03/24 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
php 的反射详解及示例代码
2016/08/25 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
jquery 通过name快速取值示例
2014/01/24 Javascript
用console.table()调试javascript
2014/09/04 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
浅谈Angular 观察者模式理解
2018/11/01 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
Python base64编码解码实例
2015/06/21 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
Python处理CSV与List的转换方法
2018/04/19 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
python入门之基础语法学习笔记
2020/02/08 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
道德之星事迹材料
2014/05/03 职场文书
服务宗旨标语
2014/07/01 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
css3应用示例:新增的选择器
2022/03/16 HTML / CSS