jQuery学习笔记之 Dom 操作 append、prepend、after、before、appendTo

最新推荐文章于 2021-10-03 19:25:11 发布

YoungHappyGIS

最新推荐文章于 2021-10-03 19:25:11 发布

阅读量1k

点赞数

分类专栏： Javascript

Javascript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用jQuery的append、prepend、after和before方法动态创建HTML节点，并通过示例代码展示了这些方法的应用。此外，还解释了append与appendTo的区别。

转载连接：http://www.taolu.name/archives/113

怎么用jquery动态创建节点

append 用于在元素的末尾追加元素
prepend 在元素的开始添加元素
after 在元素之后添加元素（添加兄弟）
before 在元素之前添加元素（添加兄弟）

append、prepend、after、before实例：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery Dom 操作</title>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	//append
	$("#table01").append("<tr><td>append</td></tr>");
	//prepend
	$("#table01").prepend("<tr><td>prepend</td></tr>");
	//after
	$("#table01").after("<tr><td>after</td></tr>");
	//before
	$("#table01").before("<tr><td>before</td></tr>");
});
</script>
</head>
 
<body>
<table id="table01">
<tr><td>当前</td></tr>
</table>
</body>
</html>

效果：

jQuery Dom appendTo 操作

append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery Dom appendTo 操作</title>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	//appendTo
	$('<div>Test</div>').appendTo('.inner');
});
</script>
</head>
 
<body>
<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
</body>
</html>

效果：