PHP第十五天作业-jquery节点添加或移动到目标节点 - PHP学习作业

首页 > 博客列表 > PHP第十五天作业-jquery节点添加或移动到目标节点

博主信息

博文 42

粉丝 3

访问量 31247

专题推荐

更多>

总结：

appendTo() 将内容动态添加到节点的最后面
传入的参数是 $('添加的内容').appendTo('要插入最的节点')
作用：将内容插入到目标节点内容的最后面

prependTo 将内容动态添加到节点的前面
传入的参数是 $('添加的内容').prependTo('要插入最的节点')
作用：将内容插入到目标节点内容的最前面

InsertAfter 将内容插入到目标节点之后, 会跑出目标节点
传入的参数是 $('添加的内容').insertAfter($('节点'))
作用：将内容插入到目标节点的后面

InsertBefore 将内容插入到目标节点之前
传入的参数是 $('添加的内容').InsertBefore($('节点'))
作用：将内容插入到目标节点的前面

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery节点添加或移动到目标节点</title>
	<style type="text/css">
		button{
			margin-bottom: 20px;
			margin-top:20px;
		}
		div{
			text-align: center;
			line-height: 50px;
		}
		.red{
			width: 500px;
			height: 50px;
			background-color: orangered;
		}
		.green{
			width: 500px;
			height: 50px;
			background-color: lightgreen;
		}
		.blue{
			width: 500px;
			height: 50px;
			background-color: lightblue;
		}
		.yellow{
			width: 500px;
			height: 50px;
			background-color: lightyellow;
		}
		.gray{
			width: 500px;
			height: 50px;
			background-color: gray;
		}
		.black{
			width: 500px;
			height: 50px;
			background-color: black;
			color:white;
		}
		.pink{
			width: 500px;
			height: 50px;
			background-color: pink;
		}
		.orange{
			width: 500px;
			height: 50px;
			background-color: orange;
		}
		

	</style>
</head>

<body>
	<div>
		<div class="red"></div>
		<div class="green"></div>
		<div class="blue"></div>
		<div class="yellow"></div>
	</div>

	<button>appendTo()</button>
	<button>prependTo()</button>
	<button>insertAfter()</button>
	<button>insertBefore()</button>
	
	<div class="gray">我是要被appendTo()移动的节点</div>
	<div class="black">我是要被prependTo()移动的节点</div>
	<div class="pink">我是要被insertAfter()移动的节点</div>
	<div class="orange">我是要被insertBefore()()移动的节点</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">

	$('button').eq(0).on('click',function(){
		//第一步: 生成节点元素,添加内容,并设置样式
		var gray = $('.gray')
		//第二点: 将新节点插入到目标节点内容的后面
		gray.appendTo($('div').eq(0))
	})

	$('button').eq(1).on('click',function(){
		//第一步: 生成节点元素,添加内容,并设置样式
		// var li = $('<li>').css('background-color','lightgreen').html('我是prependTo()新生成的节点2')
		//第二点: 将新节点插入到目标节点内容的后面
		$('.black').prependTo($('div').eq(0))
	})
		
	$('button').eq(2).on('click',function(){
		
		//第一步: 生成节点元素,添加内容,并设置样式
		var pink = $('.pink')
		//第二点: 将新节点插入到目标节点的后面
		pink.insertAfter($('div').eq(0))
	})
		
	$('button').eq(3).on('click',function(){

		$('.orange').insertBefore($('.green'))
	})
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

批改状态：合格

老师批语：