博客列表 >JQuery Dom基本操作+2018年4月9日23时30分

JQuery Dom基本操作+2018年4月9日23时30分

KongLi的博客
KongLi的博客原创
2018年04月09日 23:29:10613浏览

四个点:

// 1.appendTo() 将内容动态添加到节点的最后面

//传入的参数是 $('添加的内容').appendTo('要插入最的节点')

//作用:将内容插入到目标节点内容的最后面


// 2.prependTo 将内容动态添加到节点的前面

//传入的参数是 $('添加的内容').prependTo('要插入最的节点')

//作用:将内容插入到目标节点内容的最前面


// 3.InsertAfter 将内容插入到目标节点之后, 会跑出目标节点

//传入的参数是 $('添加的内容').insertAfter($('节点'))

//作用:将内容插入到目标节点的后面


// 4.InsertBefore 将内容插入到目标节点之前

// 传入的参数是 $('添加的内容').InsertBefore($('节点'))

//作用:将内容插入到目标节点的前面


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id=btn1> appendTo 用法</button>
	<button id=btn2> prependTo 用法</button>
	<button id=btn2> InsertAfter 用法</button>
	<button id=btn2> InsertBefore 用法</button>
	
	<p>
		<span>前面</span>
		<span>后面</span>
	</p>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		// 1.appendTo() 将内容动态添加到节点的最后面
		//传入的参数是 $('添加的内容').appendTo('要插入最的节点')
		//选择第一个button 并添加点击事件,将动态生成的 a 添加到 p内容的最后面
		//作用:将内容插入到目标节点内容的最后面
		$('button').eq(0).on('click',function(){
			var a1 = $('<a href="www.baidu.com">百度一下</a>')
			$(a1).appendTo('p')
		})

		// 2.prependTo 将内容动态添加到节点的前面
		//传入的参数是 $('添加的内容').prependTo('要插入最的节点')
		//选择第二个button 并添加点击事件,将动态生成的 a 添加到 p内容的最前面
		//作用:将内容插入到目标节点内容的最前面
		$('button').eq(1).on('click',function(){
			var a1 = $('<a href="www.baidu.com">百度一下</a>')
			$(a1).prependTo('p')
		})

		// 3.InsertAfter 将内容插入到目标节点之后, 会跑出目标节点
		//传入的参数是 $('添加的内容').insertAfter($('节点'))
		//作用:将内容插入到目标节点的后面
		$('button').eq(2).on('click',function(){
			var a1 = $('<a href="www.baidu.com">百度一下</a>')
			a1.insertAfter($('p'))
		})

		// 4.InsertBefore 将内容插入到目标节点之前
		// 传入的参数是 $('添加的内容').InsertBefore($('节点'))
		//作用:将内容插入到目标节点的前面
		$('button').eq(3).on('click',function(){
			var a1 = $('<a href="www.baidu.com">百度一下</a>')
			a1.insertBefore($('p'))
		})
	</script>
	</script>
</body>
</html>

运行实例 »

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


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