编程 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 相关文章推荐

为JavaScript提供睡眠功能(sleep) 自编译JS引擎

Aug 16 Javascript

JavaScript中“过于”犀利地for/in循环使用示例

Oct 22 Javascript

jQuery对指定元素中指定字符串进行替换的方法

Mar 17 Javascript

angularjs学习笔记之完整的项目结构

Sep 26 Javascript

JS实现简易刻度时钟示例代码

Mar 11 Javascript

WebStorm ES6 语法支持设置&babel使用及自动编译(详解)

Sep 08 Javascript

Node.js dgram模块实现UDP通信示例代码

Sep 26 Javascript

JS实现的小火箭发射动画效果示例

Dec 08 Javascript

基于axios 的responseType类型的设置方法

Oct 29 Javascript

如何利用node转发请求详解

Sep 17 Javascript

一百多行代码实现react拖拽hooks

Mar 23 Javascript

浅谈react路由传参的几种方式

Mar 23 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