博主信息
博文 23
粉丝 1
评论 1
访问量 27747
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
appendTo(),prependTo(),insertAfter(),insertBefore()--4月8日作业
潮涌学习php的博客
原创
802人浏览过

这一节学习了appendTo(),prependTo(),insertAfter(),insertBefore()这几个jquery的方法

其实这几个方法就跟append(),prepend(),after(),before()的意思是一样的,只是顺序不同,类似语文中的“把”和“被”。

appendTo():把节点添加或移动到目标节点的内容最后

prependTo():把节点添加或移动到目标节点的内容之前

insertAfter():把节点添加或移动到目标节点的之后

insertBefore():把节点添加或移动到目标节点的之前

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4.将节点添加或移动到目标节点</title>
	<style type="text/css">
		li {
			background-color: lightskyblue;
			width: 300px;
			margin-bottom: 5px;
		}
	</style>
</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: orange; width: 300px;">我是appendTo()移动的节点</p>
	<p style="background-color: orange; width: 300px;">我是prependTo()移动的节点</p>
	<p style="background-color: orange; width: 300px;">我是insertAfter()移动的节点</p>
	<p style="background-color: orange; width: 300px;">我是insertBefore()移动的节点</p>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// appendTo(),prependTo(),insetafter(),insertBefore()
	$('button').eq(0).on('click',function(){
		// 1.appendTo()
		// 语法:content.appendTo(target)
		// 参数:节点
		// 功能:插入到目标元素内容的后面

		// 1.添加操作
		// 第一步:创建一个节点
		var li = $('<li>').text('我是appendTo()生成的节点').css('background-color','lightgreen')

		// 第二步:将节点添加到指定位置
		// $('ul').appendTo(li)
		li.appendTo($('ul'))


		// 移动操作:针对页面中已经存在的元素
		$('p:first').appendTo($('ul'))
	})

	// 2.prependTo()
	$('button').eq(1).on('click',function(){
		// 1.prepend()
		// 语法:target.prepend(content)
		// 参数:节点
		// 功能:插入到目标元素内容的前面

		// 1.添加操作
		// 第一步:创建一个节点
		var li = $('<li>').text('我是prependTo()生成的节点').css('background-color','lightgreen')

		// 第二步:将节点添加到指定位置
		li.prependTo($('ul'))

		// 2.移动操作
		// $('p:first').prependTo($('ul')) first:移动第一个,eq(1):移动第二个
		$('p:eq(1)').prependTo($('ul'))
	})

	// 3.insertAfter()
	$('button').eq(2).on('click',function(){
		// 1.insertAfter()
		// 语法:content.insertAfter(target)
		// 参数:节点
		// 功能:插入到目标元素内容的后面

		// 1.添加操作
		// 第一步:创建一个节点
		var li = $('<li>').text('我是insertAfter()生成的节点').css('background-color','lightgreen')

		// 第二步:将节点添加到指定位置
		// $('ul').insertAfter(li)
		// 在第二个元素后添加
		li.insertAfter($('li:eq(1)'))

		// 2.移动操作:移动到标签后
		// $('p:first').insertAfter($('ul')) first:移动第一个,eq(1):移动第二个
		$('p:eq(2)').insertAfter($('ul'))
	})


	// 4.insertBefore()
	$('button').eq(3).on('click',function(){
		// 1.insertBefore()
		// 语法:content.insertBefore(target)
		// 参数:节点
		// 功能:插入到目标元素内容的前面

		// 1.添加操作
		// 第一步:创建一个节点
		var li = $('<li>').text('我是insertBefore()生成的节点').css('background-color','lightgreen')

		// 第二步:将节点添加到指定位置
		// li.insertBefore($('ul'))
		// 在第二个元素前添加
		li.insertBefore($('li:eq(1)'))

		// 2.移动操作
		$('p:first').insertBefore($('ul')) 
		// first:移动第一个,eq(3):移动第四个
		$('p:eq(3)').insertBefore($('ul'))

		//链式操作
		var li = $('<li>')  //创建 li标签
			.text('我是appendTo新生成的节点')  //给li标签添加文本
			.css('background-color','lightgreen')  //设置li标签的样式
			.appendTo($('ul'))  //将li标签添加到 ul标签内容的最后
	})
</script>

运行实例 »

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


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学