欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery处理Html文档

程序员文章站 2022-06-23 12:28:59
jquery处理Html文档1.向元素中添加内容append()方法向每个匹配的元素内部追加内容,添加位置是在匹配元素内部最后,如果想添加在元素的最前面,使用prepend()方法

I would like to say:

$("p").append("Hello");结果:appendTo()方法把所有匹配的元素追加到另一个指定的元素元素集合中,原来的元素会被清除。将第一个p标签内的b标签添加到第二个p标...

jquery处理Html文档

1.向元素中添加内容

  1. append()方法
    向每个匹配的元素内部追加内容,添加位置是在匹配元素内部最后,如果想添加在元素的最前面,使用prepend()方法
<p>I would like to say: </p>
$("p").append("<b>Hello</b>");

结果:
jquery处理Html文档

  1. appendTo()方法
    把所有匹配的元素追加到另一个指定的元素元素集合中,原来的元素会被清除。
    将第一个p标签内的b标签添加到第二个p标签内后面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p><b>Hello</b></p>
		<p>123</p>
		
		<script src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$($("p>b")[0]).appendTo($($("p")[1]))
			
		</script>
	</body>
</html>

结果:
jquery处理Html文档jquery处理Html文档

2.将元素包裹在另一个元素中

wrap()
案例1:把所有匹配的元素用其他元素的结构化标记包裹起来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p><b>Hello</b></p>
		<p>123</p>
		
		<script src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$("p").wrap("<div class='wrap'></div>");
			
		</script>
	</body>
</html>

结果:
jquery处理Html文档
案例2:用原先div的内容作为新div的class,并将每一个元素包裹起来

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

结果:

<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

3.删除元素

  1. empty()
    删除匹配的元素集合中所有的子节点,删除的是元素内部的东西
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p><b>Hello</b></p>
		<p>123</p>
		
		<script src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$("p").empty();
			
		</script>
	</body>
</html>

结果:
jquery处理Html文档

  1. remove()
    从DOM中删除所有匹配的元素,删除的是元素本身
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p><b>Hello</b></p>
		<p>123</p>
		
		<script src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$("p").remove();
			
		</script>
	</body>
</html>

结果:
jquery处理Html文档

本文地址:https://blog.csdn.net/Guesshat/article/details/107480036

相关标签: # JQuery