Before, we learned the inner insertion, outer insertion and deletion methods of nodes. In this section, we will learn the replacement method replaceWith
.replaceWith(newContent): replace all matching elements in the collection with the provided content and return the Delete a collection of elements
Simply put: use $() to select node A, call the replaceWith method, and pass in a new content B (HTML string, DOM element, or jQuery object) to replace the selected Node A
Look at a simple example: a piece of HTML code
<div>
<p>First paragraph</p>
<p>Second paragraph Paragraph</p>
<p>The third paragraph</p>
</div>
Replace the nodes and content of the second paragraph
$("p:eq(1)").replaceWith('<a style="color:red">Replace the content of the second paragraph</a>')
Filter out the second p element through jQuery and call replaceWith to replace it. The result is as follows
<div>
<p>First paragraph</p>
<a style ="color:red">Replace the content of the second paragraph</a>'
<p>The third paragraph</p>
</div>
.replaceAll( target ): Replace each target element with the matching element of the collection
.replaceAll() and .replaceWith() have similar functions, but the target and source are opposite. Use the above HTML structure, we use replaceAll to process
$('<a style="color:red">replace the content of the second paragraph</a>').replaceAll('p:eq( 1)')
Summary:
replaceAll() and .replaceWith() have similar functions, the main difference is the location of the target and source
replaceWith() and The .replaceAll() method will delete all data and event handlers associated with the node
The replaceWith() method, like most other jQuery methods, returns a jQuery object, so it can be chained with other methods
The jQuery object returned by the replaceWith() method refers to the node before replacement, not the node after replacement through the replaceWith/replaceAll method
Look at the following example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
.right div {
background: yellow;
}
</style>
</head>
<body>
<h2>replaceWith()和replaceAll()</h2>
<div class="left">
<button class="bt1">点击,通过replaceWith替换内容</button>
<button class="bt2">点击,通过rreplaceAll替换内容</button>
</div>
<div class="right">
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
<div>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
</div>
</div>
<script type="text/javascript">
//只克隆节点
//不克隆事件
$(".bt1").click(function(){
//找到内容为第二段的p元素
//通过replaceWith删除并替换这个节点
$(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
})
</script>
<script type="text/javascript">
//找到内容为第六段的p元素
//通过replaceAll删除并替换这个节点
$(".bt2").click(function() {
$('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
})
</script>
</body>
</html>
Next Section