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

jQuery DOM复制详解

于 2013-12-28 13:55:00 发布 · 130 阅读

文章标签：

#javascript #ViewUI

本文介绍jQuery中DOM操作的复制节点方法，重点讲解clone()及clone(true)的区别，并通过实例演示如何使用这些方法来实现节点的复制，包括事件绑定的复制。

1.各个方法详解

clone()方法；clone(true)表示也复制其绑定的事件。

2.实例

<html>
	<head>
		<title>jQuery中的DOM操作.复制节点</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				$("a").click(function(){
					var $currentNodeFather=$(this).parent();
					//var $copyNode=$currentNodeFather.clone();//区别clone(true)与clone()区别
					var $copyNode=$currentNodeFather.clone(true);
					//$currentNodeFather.after($copyNode);//再一次对比after()与insertAfter()区别
					$copyNode.insertAfter($currentNodeFather);
			});
			});
		</script>
	</head>

	<body>
		<p title="Choose your favorite fruit.">What's your favorite fruit?</p>
		<ul>
			<li>Apple<a href="#">复制节点</a></li>
			<li>Banana<a href="#">复制节点</a></li>
			<li>Pineapple<a href="#">复制节点</a></li>
		</ul>
	</body>
</html>