01文档处理_jquery插入操作(append()、appendTo()、prepend()、prependTo()、after()、before()、insertAfter()等）

最新推荐文章于 2022-05-12 22:22:36 发布

ginger_mr

最新推荐文章于 2022-05-12 22:22:36 发布

阅读量293

点赞数

分类专栏： Callback

本文链接：https://blog.csdn.net/qq_40332952/article/details/104445422

版权

Callback 专栏收录该内容

51 篇文章 2 订阅

订阅专栏

01文档处理_jquery插入操作(append()、appendTo()、prepend()、prependTo()、after()、before()、insertAfter()等）

方法分析：

		   内部插入(添加的是selcet中的第一个option和最后一个optin)
		   		内部结尾处:select元素里面
		  		1.append(content):内部结尾处，将B追加到A里面去
		   		2.appendTo(content):内部结尾处，将A追加到B里面去
		   		3.prepend(content):内部开始处，将B追加到A里面去
		   		4.prependTo(content):内部开始处，将B追加到A里面去
		  	外部插入(将添加的option放到select中的任意位置)
		   		外部:指的是具体的某个option就是平级的添加
		   		1.after(content):外部，将B追加到A后面
		  		2.before(content):外部，将A追加到B前面
		  		3.insertAfter(content):外部，将A追加到B后面
		  		4.insertBefore(content)::外部，将A追加到B前面

代码演示

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文档处理_插入操作</title>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/**
			 * 需求 
			 *  在id=edu下增加<option value="大专">大专</option> 
			 */

			/**
			 * 方法分析：
			 *  内部插入
			 * 		1.append(content):内部结尾处，将B追加到A里面去
			 *  	2.appendTo(content):内部结尾处，将A追加到B里面去
			 *  	3.prepend(content):内部开始处，将B追加到A里面去
			 *  	4.prependTo(content):内部开始处，将B追加到A里面去
			 * 	外部插入
			 *  	1.after(content):外部，将B追加到A后面
			 * 		2.before(content):外部，将A追加到B前面
			 * 		3.insertAfter(content):外部，将A追加到B后面
			 * 		4.insertBefore(content)::外部，将A追加到B前面
			 */

			$(function() {
				// 追加 option 内容大专
				// 创建元素
				var $newNode = $("<option value='大专'>大专</option>");
				
				//内部插入
				//$("#edu").append($newNode);   // 内部结尾，将B追加到A里面去
				//$("#edu").prepend($newNode);  // 内部开始，将B追加到A里面去

				//外部插入
				$("option[value='本科']").after($newNode);
				//$newNode.insertBefore($("option:contains('硕士')"));
			});
		</script>

	</head>

	<body>
		<select id="edu">
			<option value="博士">博士</option>
			<option value="硕士">硕士</option>
			<option value="本科">本科</option>
			<option value="高中">高中</option>
		</select>

	</body>

</html>

页面展示
//外部插入
$(" o p t i o n [v a l u e =^{'} 本科^{'}] ") . a f t e r ($ newNode); 将B追加到A后面(大专在本科后面)
在这里插入图片描述

ginger_mr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01文档处理_jquery插入操作(append()、appendTo()、prepend()、prependTo()、after()、before()、insertAfter()等）

01文档处理_jquery插入操作方法分析：内部插入(添加的是selcet中的第一个option和最后一个optin) 内部结尾处:select元素里面 1.append(content):内部结尾处，将B追加到A里面去 2.appendTo(content):内部结尾处，将A追加到B里面去 3.prepend(content):...
复制链接

扫一扫