jQuery实现节点克隆、替换和互换

最新推荐文章于 2024-05-28 17:34:48 发布

刘彦民

最新推荐文章于 2024-05-28 17:34:48 发布

阅读量3.7k

点赞数

分类专栏：前端文章标签： jQuery DOM

本文链接：https://blog.csdn.net/u014740338/article/details/42837051

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现节点克隆、替换和互换</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(function (){
		//克隆结点
		//在计算机后克隆一个北京节点
		//先给所有的li添加一个点击事件
		$("li").click(function (){
			alert($(this).text());
		});
		//注意：
		//1、clone(true)可以获取到被克隆的节点的时间，而clone()没有
		//2、注意修改被克隆节点的id属性
		$("#beijing").clone(true).attr("id","bj").insertAfter($("#computer"));
		
		//节点替换
		//替换#city 节点的第一个li子节点
		$("<li>尚硅谷</li>").replaceAll($("#city li:first"));
		//替换#city 节点的第三个li子节点
		$("#city li:eq(2)").replaceWith($("<li>东京</li>"));
		
		//节点的互换
		//广州节点和印刷工程节点的互换
		var $guangzhou2 = $("#guangzhou").clone(true);
		//alert("a");
		var $print = $("#print").replaceWith($guangzhou2);
		//alert(2);
		$("#guangzhou").replaceWith($print);
	});
</script>
</head>
<body>
	<p>选择你所喜欢的城市？</p>
	<ul id="city">
		<li>哈尔滨</li>
		<li id="beijing">北京</li>
		<li>上海</li>
		<li id="guangzhou">广州</li>
	</ul>
	<p>选择你所喜欢的专业？</p>
	<ul id="major">
		<li id="computer">计算机</li>
		<li>会计</li>
		<li>管理学</li>
		<li id="print">印刷工程</li>
	</ul>
</body>
</html>