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.向元素中添加内容
- append()方法
向每个匹配的元素内部追加内容，添加位置是在匹配元素内部最后，如果想添加在元素的最前面，使用prepend()方法
<p>I would like to say: </p>
$("p").append("<b>Hello</b>");
结果：
- 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>
结果：
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>
结果：
案例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>
结果：
- 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>
结果：
本文地址：https://blog.csdn.net/Guesshat/article/details/107480036
上一篇： AirPods 3使用起来怎么样?AirPods 3体验评测
下一篇： 跟你有什么关系