一、内部插入（前插入、后插入）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery添加DOM节点常用的五种方法</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		
		<div id="content">
			<span>郑州</span>
		</div>
		<!--内部插入-->
		<script>
			//内部前插入
			$("#content").prepend("<i>河南省</i>");
			//内部后插入
			$("#content").append("<b>大学</b>")
		</script>
		
	</body>
</html>

二、外部插入（前插入、后插入）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery添加DOM节点常用的五种方法</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		
		<!--外部插入-->
		<span id="bj">北京</span>
		<script>
			//外部前插入
			$("#bj").before("<i>北京市</i>");
			//外部后插入
			$("#bj").after("<b>大学</b>");
		</script>
			
	</body>
</html>

三、包裹

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery添加DOM节点常用的五种方法</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		
		<!--包裹-->
		<span class="sina">新浪</span>
		<script>
			//包裹
			$(".sina").wrap("<a href='http://www.sina'></a>");
		</script>
		
	</body>
</html>

 

更多推荐

jQuery添加DOM节点常用的5种方法