jQuery 替换元素
jQuery提供 replaceWith() 方法来将给定HTML文档中现有的HTML内容替换为新内容。
jQuery replaceWith()方法
jQuery replaceWith() 方法从DOM中删除内容并插入新的内容。
以下是 replaceWith() 方法的语法:
$(selector).replaceWith(newContent);
replaceWith() 方法将删除与已删除节点相关联的所有数据和事件处理程序。
概要
考虑以下HTML内容:
<div class="container">
<h2>jQuery replaceWith() Method</h2>
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
<div class="hello">Hello</div>
</div>
现在,如果我们按照以下方式应用 replaceWith() 方法:
$( ".hello" ).replaceWith("<h2>New Element</h2>" );
它将产生以下结果:
<div class="container">
<h2>jQuery remove() Method</h2>
<h2>New Element</h2>
<div class="goodbye">Goodbye</div>
<h2>New Element</h2>
</div>
如果在<div class="hello">
内部有任意数量的嵌套元素,它们也会被删除。
示例
让我们尝试以下示例并验证结果:
<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
(document).ready(function() {("button").click(function(){
$( ".hello" ).replaceWith("<h2>New Element</h2>" );
});
});
</script>
</head>
<body>
<div class="container">
<h2>jQuery replaceWith() Method</h2>
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
<div class="hello">Hello</div>
</div>
<br>
<button>Replace Element</button>
</body>
</html>
示例
以下示例将所有段落替换为 精彩 。
<!doctype html>
<html lang="en">
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
(document).ready(function() {("button").click(function(){
$( "p" ).replaceWith( "<b>Brilliant</b>" );
});
});
</script>
</head>
<body>
<h2>jQuery replaceWith() Method</h2>
<p>Zara</p>
<p>Nuha</p>
<p>Ayan</p>
<button>Replace Element</button>
</body>
</html>