Dom 操作 append、prepend、after、before、appendTo

最新推荐文章于 2022-09-28 14:46:22 发布

Inuyasha1121

最新推荐文章于 2022-09-28 14:46:22 发布

阅读量5.8k

点赞数 3

分类专栏： jquery 函数文章标签： jquery dom操作函数

jquery 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

函数

17 篇文章 0 订阅

订阅专栏

怎么用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>

效果：