jQuery克隆和替换节点

最新推荐文章于 2022-06-14 22:45:16 发布

JamesZYW

最新推荐文章于 2022-06-14 22:45:16 发布

阅读量392

点赞数

分类专栏： jQuery 文章标签： jQuery克隆和替换节点

本文链接：https://blog.csdn.net/zhanyouwen/article/details/51591331

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<title>jQuery克隆和替换节点</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(function(){
		// 为每个li添加click事件
		$("li").click(function(){
			alert($(this).text());
		});
		// 1.克隆节点 clone(),clone(true)
		// clone():只复制该节点，没有包含事件
		// clone(true):不仅复制该节点，也包含事件
		$("#bj").clone(true)
				.attr("id","bj2")  // 将其id改为bj2,同一个文档中不能有两个id一样的元素
				.insertAfter("#fr");
				
		// 2.替换节点  replaceWith(),replaceAll()
		// 1).创建一个<li>长沙</li> 子节点	
		// 2).替换 #city 的最后一个li 子节点
		//$("#city li:last").replaceWith("<li>长沙</li>");
		//$("<li>长沙</li>").replaceAll($("#city li:last"));
		//$("#bj").replaceAll($("#sz"));// 替换的同时，还移动节点
		//$("#bj").replaceWith($("#sz"));// 替换的同时，还移动节点
		
		// 3.节点互换位置,需要先克隆节点
		var $bj2 = $("#bj").clone(true);
		var $sz = $("#sz").replaceWith($bj2);
		$("#bj").replaceWith($sz);
	});
</script>
</head>

<body>
	<p>你喜欢哪个城市?</p>
	<ul id="city">
    	<li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    <hr />
    <ul id="quyu">
    	<li id="fr">芙蓉区</li>
        <li id="yl">岳麓区</li>
        <li id="gx">高新区</li>
    </ul>
</body>
</html>