博客列表 >4.8jquery的DOM操作

4.8jquery的DOM操作

宋的博客
宋的博客原创
2018年04月09日 17:01:24556浏览

jquery的DOM操作:

1、插入到节点内容之后:appendTo()

2、插入到节点内容之前:prependTo()

3、插入到节点之后: InsertAfter()

4、插入到节点之前: InsertBefore()


代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>节点1</li>
		<li>节点2</li>
		<li>节点3</li>
		<li>节点4</li>
		<li>节点5</li>
	</ul>
	<button>appendTo</button>
	<button>prependto</button>
	<button>insertAfter</button>
	<button>insertbefore</button>
	<p style="background-color:lightblue">移动的节点prependto</p>
	<p style="background-color:lightblue">移动的节点insertAfter</p>
	<p style="background-color:lightblue">移动的节点insertbefore</p>
</body>
</html>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
				// 1.appendTo(),插入内容到目标元素后面
				// 生成节点元素,设置样式,使用appendTo插入<li>的内容后面
	$('button').eq(0).on('click',function(){
			
		var li = $('<li>').css('background-color','lightgreen').html('我是appendTo节点')
		li.appendTo($('ul'))
	})

		
				// 2.prependTo(),移动第一个P内容,插入内容到ul的前面
	$('button').eq(1).on('click',function(){
		
		$('p:eq(0)').prependTo($('ul'))

	})
		

				// 3.insertAfter(),移动第二个P内容,插入到第2个li的后面 
				
		$('button').eq(2).on('click',function(){
		
		$('p:eq(1)').insertAfter($('li:eq(1)'))

	})

				// 4.insertbefore(),移动第3个P内容,移到第5个li 的前面
		$('button').eq(3).on('click',function(){

			$('p:eq(2)').insertBefore($('li:eq(4)'))

		})

</script>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议