编程 Javascript

节点的插入之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 相关文章推荐

6款经典实用的jQuery小插件及源码(对话框/提示工具等等)

Feb 04 Javascript

JS:window.onload的使用介绍

Nov 13 Javascript

通过pjax实现无刷新翻页(兼容新版jquery)

Jan 31 Javascript

JS闭包、作用域链、垃圾回收、内存泄露相关知识小结

May 16 Javascript

ExtJS 4.2 Grid组件单元格合并的方法

Oct 12 Javascript

JavaScript实现三级联动菜单效果

Aug 16 Javascript

详解小程序rich-text对富文本支持方案

Nov 28 Javascript

推荐一个基于Node.js的表单验证库

Feb 15 Javascript

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

Apr 11 Javascript

浅谈Vuex注入Vue生命周期的过程

May 20 Javascript

通过jQuery学习js类型判断的技巧

May 27 jQuery

p5.js码绘“跳动的小正方形”的实现代码

Oct 22 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