jQuery元素节点操作

最新推荐文章于 2020-09-14 18:37:38 发布

lipeiwen1998

最新推荐文章于 2020-09-14 18:37:38 发布

阅读量220

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/lipeiwen1998/article/details/107567099

版权

一、内部插入

append()

append()向每个匹配的元素内部追加内容，这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似

//在div中追加了一个p标签
$("#div1").append($("<p>"));

appendTo()

把所有匹配的元素追加到另一个指定的元素元素集合中，实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中

//把标签p追加到div中
$("<p>").appendTo($("#div1"));

prepend()

向每个匹配的元素内部前置内容，这是向所有匹配元素内部的开始处插入内容的最佳方式

//往div内容的前面插入了一个p标签
$("#div1").prepend($("<p>"));

prependTo()

把所有匹配的元素前置到另一个、指定的元素元素集合中，实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中

//把p标签插入到div内容的前面
$("<p>").prependTo($("#div1"));

二、外部插入

after()

在每个匹配的元素之后插入内容

//在div后面插入了一个p标签
$("#div1").after($("<p>"));

before()

在每个匹配的元素之前插入内容

//在div前面插入了一个p标签
$("#div1").after($("<p>"));

insertAfter()

把所有匹配的元素插入到另一个、指定的元素元素集合的后面，实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面

//把p标签插入到div后面
$("<p>").insertAfter($("#div1"));

insertBefore()

把所有匹配的元素插入到另一个、指定的元素元素集合的前面，实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面

//把p标签插入到div前面
$("<p>").insertBefore($("#div1"));

三、包裹

wrap()

把所有匹配的元素用其他元素的结构化标记包裹起来
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质
这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数
因此，如果要添加文本应该在包裹完成之后再行添加

//把所有的段落用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>");

remove()

从DOM中删除所有匹配的元素
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素
但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除

//从DOM中把所有段落删除
$("p").remove();

点击添加删除列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.prependLie,.removeLie{
				width: 200px;
				height: 40px;
				margin: 10px 100px;
				border-radius: 15px;
				border: 2px solid rgba(192,192,192,0.8);
				font-family: "楷体";
				font-size: 20px;
				outline: none;
			}
			li{
				height: 30px;
				background: #DCDCDC;
				list-style: none;
				margin-top: 10px;
				line-height: 30px;
				padding: 10px;
			}
		</style>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".prependLie").on("click",function(){
					$("ul").prepend("<li>列表$$</li>");
				})
				$(".removeLie").on("click",function(){
					$("li").remove("li:eq(0)");
				})
			})
		</script>
	</head>
	<body>
		<button class="prependLie">添加一列</button>
		<button class="removeLie">删除一列</button>
		<ul></ul>
	</body>
</html>