DOM操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Tony_Liu0611/article/details/51932083

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>DOM相关</title>
	<script type="text/javascript" src="../jquery-2.2.3.js"></script>
	<style type="text/css">
	.div_1{
	background: red;
	width: 400px;
	}

	.div_2{
	background: yellow;
	width: 400px;
	height: 200px;
	}

	</style>
	</head>
	<body>
	<div class="div_1">

	</div>

	<div class="div_2">
	<p>第一个p标签</p>
	<p>第二个p标签</p>
	</div>

	<input type="button" value="append" onclick="fn1(this);" />
	<br />

	<input type="button" value="appendTo" onclick="fn2(this);" />
	<br />

	<input type="button" value="prepend" onclick="fn3(this);" />
	<br />

	<input type="button" value="prependTo" onclick="fn4(this)" />
	<br />

	<input type="button" value="after" onclick="fn5(this)" />
	<br />

	<input type="button" value="before" onclick="fn6(this);" >
	<br />

	<input type="button" value="insertAfter" onclick="fn7(this);" />
	<br />

	<input type="button" value="insertBefore" onclick="fn8(this);" />
	<br />

	<input type="button" value="remove" onclick="fn9(this);" />
	<br />

	<input type="button" value="empty" onclick="fn10(this);" />
	<br />

	<input type="button" value="replaceWith" onclick="fn11(this);" />
	<br />

	<input type="button" value="clone" />
	<br />

	<input type="button" value="wrap" onclick="fn13(this);" />
	<br />

	<input type="button" value="unwrap" onclick="fn14(this);" />
	<br />

	<input type="button" value="wrapInner" onclick="fn15(this);" />


	<script type="text/javascript">
	function fn1 (ele) {
	//append(): 将参数中的元素加入到当前元素内的尾部
	$('.div_1').append('<p>append进去的p元素</p>');
	}

	function fn2 (ele) {
	//appendTo(): 将当前元素插入到参数元素的尾部
	$('<p>appendTo进去的p元素</p>').appendTo($('.div_1'));
	}

	function fn3 (ele) {
	//prepend(): 将参数中的元素变成当前元素的第一个子元素
	$('.div_2').prepend($('.div_2 p:last'));
	}

	function fn4 (ele) {
	//prependTo(): 将当前元素变成参数元素的第一个子元素
	$('.div_2 p:last').prependTo($('.div_2'));
	}

	function fn5 (ele) {
	//after(): 将参数中的元素，加入到当前元素的后面。（同级关系）
	$('.div_2 p:last').after($('.div_2 p:first'));
	}

	function fn6 (ele) {
	//before(): 将参数中的元素，加入到当前元素的前面（同级关系）
	$('.div_2 p:first').before($('.div_2 p:last'));
	}

	function fn7 (ele) {
	//insertAfter(): 将当前元素加入到参数元素的后面（同级关系）
	$('.div_2 p:first').insertAfter($('.div_2 p:last'));
	}

	function fn8 (ele) {
	//insertBefore(): 将当前元素加入到参数元素的前面（同级关系）
	$('.div_2 p:last').insertBefore($('.div_2 p:first'));
	}

	function fn9 (ele) {
	//remove(): 移除当前元素，可以设置移除条件
	$(ele).remove();
	// $('p').remove();
	//按照条件删除
	$('p').remove('.div_2 p:last');
	}

	function fn10 (ele) {
	//empty(): 清空当前元素内的所有元素
	$('.div_2').empty();
	}

	function fn11 (ele) {
	//replaceWith(): 将当前元素替换成参数元素。
	$(ele).replaceWith('<p style="color:red;">拿命来！</p>');
	}

	// function fn12 (ele) {
	// //clone(): 克隆一个元素，如果有参数，并且参数为true那么，克隆出来的元素具备之前元素事件，如果不填写参数或者参数为false，则只克隆结构和样式，不克隆事件。
	// //注意：不要去克隆带有ID的元素。
	// var $cloneBtn = $(ele).clone(false);
	// $cloneBtn.insertAfter($(ele));
	// }


	$('[value = clone]').click(function () {
	//注意：如果元素本身写好了onclick事件的话，那么克隆后都具备单机事件，但如果像这种写法，就要进行参数设置了。
	// var $cloneBtn = $(this).clone();
	var $cloneBtn = $(this).clone(true);
	$cloneBtn.insertAfter($(this));
	});


	function fn13 (ele) {
	//wrap: 将当前元素用一个HTML结构包裹起来
	$("div").wrap("<div style='background:blue;'></div>");
	}

	function fn14 (ele) {
	//unwrap: 将当前元素，快速取消包裹的HTML结构
	$("div").unwrap();
	}

	function fn15 (ele) {
	//wrapInner:将当前元素内的子元素用HTML结构包裹起来
	$("div").wrapInner("<b></b>");
	}


	</script>
	</body>
	</html>

jQuery,DOM相关