系统学习jQuery.核心知识.局部.jQuery操作.DOM操作.插入节点

深入理解jQuery中DOM操作：插入节点

最新推荐文章于 2025-12-02 21:41:05 发布

最新推荐文章于 2025-12-02 21:41:05 发布 · 121 阅读

文章标签：

#javascript #ViewUI

本文详细介绍了jQuery中的DOM操作，包括append、appendTo、prepend、prependTo、after、insertAfter、before和insertBefore等方法，并通过实例展示了如何在实际项目中应用这些方法。

1.每种方法详细介绍

2.实例

<html>
	<head>
		<title>jQuery中的DOM操作.插入节点</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				//append方法
				//var $obj=$("<b>我爱吃：</b>");
				//$("ul li:eq(0)").append($obj);
				
				//appendTo方法（与append方法对应）
				//var $obj=$("<b>我爱吃：</b>");
				//$($obj).appendTo("ul li:eq(0)");
				//可直接简写如下：$("<b>我爱吃：</b>").appendTo("ul li:eq(0)");

				//prepend方法
				//var $obj=$("<b>我爱吃：</b>");
				//$("ul li:eq(0)").prepend($obj);
				
				//prependTo方法（与prepend方法对应）
				//var $obj=$("<b>我爱吃：</b>");
				//$($obj).prependTo("ul li:eq(0)");

				//after方法
				//var $obj=$("<b>我爱吃：</b>");
				//$("ul li:eq(0)").after($obj);

				//insertAfter方法
				//var $obj=$("<b>我爱吃：</b>");
				//$($obj).insertAfter("ul li:eq(0)");

				//before方法
				//var $obj=$("<b>我爱吃：</b>");
				//$("ul li:eq(0)").before($obj);
				
				//insertBefore方法
				var $obj=$("<b>我爱吃：</b>");
				$($obj).insertBefore("ul li:eq(0)");

			});
		</script>
	</head>

	<body>
		<p title="Choose your favorite fruit.">What's your favorite fruit?</p>
		<ul>
			<li>Apple</li>
			<li>Banana</li>
			<li>Pineapple</li>
		</ul>
	</body>
</html>