1. 首页首页
  2. 科技前沿科技前沿

2025年如何用js(jq)给html元素标签前面或者后面增加一个元素标签

科技前沿 • • 阅读 68

如何用js(jq)给html元素标签前面或者后面增加一个元素标签前言 after 方法 before 方法 append 方法 prepend 方法 appendTo 方法 prependTo 方法 insertAfter 方法 insertBefore 方法 wrap 方法 wrapAll 方法 wrapInner 方法 各个方法的使用 利弊 BUG 等做了深入说明

大家好，我是讯享网，很高兴认识大家。

前言

 after()方法,before() 方法,append() 方法,prepend() 方法,appendTo() 方法,prependTo() 方法,insertAfter() 方法,insertBefore() 方法,wrap()方法,wrapAll() 方法,wrapInner() 方法 。各个方法的使用，利弊，BUG等做了深入说明

这种操作属于【jQuery HTML / CSS 方法】

具体API请看

https://www.runoob.com/jquery/jquery-ref-html.html

  

第一种：在被选元素前后插入内容

在被选元素后插入内容 请使用 after()方法

和

在被选元素前插入内容，请使用 before() 方法

注意：after()方法和before() 方法不能同时出现使用，会出现BUG的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").after("<p>Hello world!</p>");
  });
});
</script>
</head>
<body>

<button>在每个P元素后插入内容</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

</body>
</html>
讯享网

 结果

讯享网<body style=""> <button>在每个P元素后插入内容</button> <p>这是一个段落。</p><p>Hello world!</p> <p>这是另一个段落。</p><p>Hello world!</p> </body>

如果两个方法同时执行，结果如下

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
	$("p").before("<p>前面</p>");
    $("p").after("<p>后面</p><hr>");
  });
});
</script>
</head>
<body>

<button>在每个P元素后插入内容</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

</body>
</html>

 结果

 

讯享网<body style=""> <button>在每个P元素后插入内容</button> <p>前面</p><p>后面</p><hr><p>这是一个段落。</p><p>后面</p><hr> <p>前面</p><p>后面</p><hr><p>这是另一个段落。</p><p>后面</p><hr> </body>

为了避免上面错误，我们可以利用for循环遍历

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
	  var _p=$("p");
	  for(var i=0; i<_p.length;i++)
	  {
	   _p.eq(i).before("<p>前面</p>");
       _p.eq(i).after("<p>后面</p><hr>");
	   }
	  
  });
});
</script>
</head>
<body>

<button>在每个P元素后插入内容</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

</body>
</html>

结果

<body style=""> <button>在每个P元素后插入内容</button> <p>前面</p><p>这是一个段落。</p><p>后面</p><hr> <p>前面</p><p>这是另一个段落。</p><p>后面</p><hr> </body>

 

第二种：在被选元素的开始结尾插入内容

append() 方法在被选元素的结尾插入指定内容。

prepend() 方法在被选元素的开头插入指定内容。

注意：append()方法和prepend() 方法不能同时出现使用，会出现BUG的。

如果想要避免，请参考，第一种的for循环遍历代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("#btn1").click(function(){ 
		$("p").append(" <b>后面插入</b>.");
	});
	 
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<p>这是另一个段落</p>
 
<button id="btn1">插入文本</button> 

</body>
</html>

结果

<body style=""> <p>这是一个段落。 <b>后面插入</b>.</p> <p>这是另一个段落 <b>后面插入</b>.</p> <button id="btn1">插入文本</button> </body>

 

第三种：在被选元素的结尾插入 HTML 元素

appendTo() 方法在被选元素的结尾插入 HTML 元素。

prependTo() 方法在被选元素的开头插入 HTML 元素。

这两个方法 可以同时使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("<span>Hello World!</span>").appendTo("p");
	});
});
</script>
</head>
<body>

<button>在每个P元素结尾插入span元素。</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

</body>
</html>

结果

<body style=""> <button>在每个P元素结尾插入span元素。</button> <p>这是一个段落。<span>Hello World!</span></p> <p>这是另一个段落。<span>Hello World!</span></p> </body>

appendTo()和prependTo()两个同时使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		 $("<span>开头【</span>").prependTo("p");
		$("<span>】结尾</span>").appendTo("p");
	});
});
</script>
</head>
<body>

<button>在每个P元素结尾插入span元素。</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

</body>
</html>

<body style=""> <button>在每个P元素结尾插入span元素。</button> <p><span>开头【</span>这是一个段落。<span>】结尾</span></p> <p><span>开头【</span>这是另一个段落。<span>】结尾</span></p> </body>

 

第四种：在被选元素前后插入 HTML 元素

insertAfter() 方法在被选元素后插入 HTML 元素。

insertBefore() 方法在被选元素前插入 HTML 元素。

注意：内容里必须包含html元素标签。

两个方法可以同时使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("<span>Hello world!</span>").insertBefore("p");
	});
});
</script>
</head>
<body>

<button>在P元素之前插入span元素</button>
<br><br>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

</body>
</html>

<body style=""> <button>在P元素之前插入span元素</button> <br><br> <span>Hello world!</span><p>这是一个段落。</p> <span>Hello world!</span><p>这是另一个段落。</p> </body>

insertAfter() 方法和insertBefore() 方法同时使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("<span>前【</span>").insertBefore("p");
		$("<span>】Hello world!</span>").insertAfter("p");
		
	});
});
</script>
</head>
<body>

<button>在P元素后面插入span元素</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

</body>
</html>

<body style=""> <button>在P元素后面插入span元素</button> <span>前【</span><p>这是一个段落。</p><span>】Hello world!</span> <span>前【</span><p>这是另一个段落。</p><span>】Hello world!</span> </body>

------

如果前面这四个不是你想要的，那么下面就一定是你想要的

------

第五种：wrap()在每个被选元素的周围用 HTML 元素包裹起来

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").wrap("<div></div>");
	});
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>

<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>给每个P元素包裹一个div元素</button>

</body>
</html>

<body style=""> <div><p>这是一个段落。</p></div> <div><p>这是另一个段落。</p></div> <button>给每个P元素包裹一个div元素</button> </body>

从这个结果可以看出，他是把每个P 标签都用div给包裹了

第六种：wrapAll() 方法使用指定的 HTML 元素来包裹所有被选元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").wrapAll("<div></div>");
	});
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>

<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>给所有p元素包装一个div元素</button>

</body>
</html>

<body style=""> <div><p>这是一个段落。</p><p>这是另一个段落。</p></div> <button>给所有p元素包装一个div元素</button> </body>

从这个结果可以看出，他用div把所有P标签一起给包裹了

第七种：wrapInner() 方法 

 wrapInner() 方法使用指定的 HTML 元素来包裹每个被选元素中的所有内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").wrapInner("<b></b>");
	});
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个p元素的内容上包装一个b元素</button>

</body>
</html>

<body style=""> <p><b>这是一个段落。</b></p> <p><b>这是另一个段落。</b></p> <button>在每个p元素的内容上包装一个b元素</button> </body>

从这个结果可以看出，他是把每个P 标签里的内容都用b标签给包裹了

 

 

 

 

小讯
上一篇 2025-04-01 16:04
下一篇 2025-03-30 15:28

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/58391.html