📌  相关文章
📜  如何替换 jQuery 中的 HTML 元素？(1)

📅  最后修改于: 2023-12-03 14:53:09.058000             🧑  作者: Mango

如何替换 jQuery 中的 HTML 元素？

在 jQuery 中，替换 HTML 元素可以使用 replaceWith() 方法。这个方法会用指定的内容替换匹配的元素。

语法
$(selector).replaceWith(content)

参数说明：

  • selector：一个用于匹配元素的 CSS 选择器。
  • content：替换元素的内容，可以是 HTML 字符串、DOM 元素、文本、jQuery 对象及其数组等。
示例

下面的示例演示了如何通过点击按钮来替换元素：

<!DOCTYPE html>
<html>
<head>
	<title>替换元素</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$("#btn1").click(function(){
				$("#p1").replaceWith("<h1>New heading</h1>");
			});
		});
	</script>
</head>
<body>

	<p id="p1">这是一个段落。</p>

	<button id="btn1">替换元素</button>

</body>
</html>
  • replaceWith() 方法会用新的元素替换匹配的元素。
  • 在这个示例中，我们用一个标题来替换 id="p1" 的段落元素。
结论

使用 replaceWith() 方法可以在 jQuery 中替换 HTML 元素。只需指定要替换的元素的 CSS 选择器以及新的内容即可。