jquery处理Html文档

程序员文章站 2022-03-07 16:41:19

jquery处理Html文档1.向元素中添加内容append()方法向每个匹配的元素内部追加内容，添加位置是在匹配元素内部最后，如果想添加在元素的最前面，使用prepend()方法

I would like to say:

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

jquery处理Html文档

1.向元素中添加内容

append()方法
向每个匹配的元素内部追加内容，添加位置是在匹配元素内部最后，如果想添加在元素的最前面，使用prepend()方法

<p>I would like to say: </p>
$("p").append("<b>Hello</b>");

结果：
jquery处理Html文档

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文档

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.删除元素

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文档

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处理Html文档

jquery处理Html文档

1.向元素中添加内容

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

3.删除元素

Jquery Post处理后不进入回调的原因及解决方法教程

javascript - JQuery 如何传递input file的内容至PHP进行处理

jquery ajax请求方式与提示用户正在处理请稍等

jquery text(),val(),html()方法区别总结_jquery

前端笔记-通过jQuery获取input数据及html中name的使用

Jquery在指定DIV加载HTML示例代码

php将数据库中所有内容生成静态html文档的代码_PHP

叕叕又升级啦！PDF文档管理控件Aspose.PDF 11月新更！支持居中对齐输出HTML

php post请求和jquery中post请求有什么不同吗？该如何处理

请问一份标准的HTML文档有哪几个必须的HTML标签_html/css_WEB-ITnose