.replaceWith()
返回: jQuery
.replaceWith( newContent )
描述：用提供的新内容替换掉匹配的元素集合中的每个元素，并返回已经被删除的元素的集合。
加入于: 1.2
.replaceWith( newContent )- newContent要插入的内容。可能是HTML字符串、DOM元素、DOM元素的数组，或者jQuery对象。
加入于: 1.4
.replaceWith( function )- function类型：Function()一个函数，它返回匹配的元素集合所要替换的内容。
.replaceWith()方法在一次调用中，从DOM上删除内容，并把一段新内容插入到它的位置。设想这样的DOM结构：
<div class="container"> <div class="inner first">Hello</div> <div class="inner second">And</div> <div class="inner third">Goodbye</div> </div>
可以用指定的HTML替抱内部<div>。
$( "div.second" ).replaceWith( "<h2>New heading</h2>" );
结果的结构如下：
<div class="container"> <div class="inner first">Hello</div> <h2>New heading</h2> <div class="inner third">Goodbye</div> </div>
可以一次性瞄准所有的内部的div：
$( "div.inner" ).replaceWith( "<h2>New heading</h2>" );
这导致它们全都被替换掉了：
<div class="container"> <h2>New heading</h2> <h2>New heading</h2> <h2>New heading</h2> </div>
可以选中一个元素，作为替换内容：
$( "div.third" ).replaceWith( $( ".first" ) );
结果的结构如下：
<div class="container"> <div class="inner second">And</div> <div class="inner first">Hello</div> </div>
这个示例演示了被选中的元素代替了目标元素，是把它从它的旧位置移过来，而不是克隆过来。
.replaceWith()方法，就和大多数jQuery方法一样，会返回一个jQuery对象，因此别的方法可以连缀到它后面。然而，需要注意的是，是返回了原始jQuery对象。
其它说明
- T
.replaceWith()方法除了删除元素，还删除了所有的和被删除的元素有关的数据以及事件处理函数。 - 在jQuery 1.9以前的版本中，
.replaceWith()会试图添加或改变当前jQuery集合中的节点。这个方法可能返回一个新的jQuery集合，而不是原始的集合。自从jQuery 1.9，.after()方法、.before()方法和.replaceWith()方法总是返回原始的未经修改的集合。但是尝试在这些没有父元素的元素在一个节点上使用这些方法，不会有效果——那是说，无论是集合还是它所包含的节点都不会改变。
示例
点击之后，用一个包含了同样的词的div来代替按钮。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>replaceWith demo</title>
<style>
button {
display: block;
margin: 3px;
color: red;
width: 200px;
}
div {
color: red;
border: 2px solid blue;
width: 200px;
margin: 3px;
text-align: center;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>First</button>
<button>Second</button>
<button>Third</button>
<script>
$( "button" ).click(function() {
$( this ).replaceWith( "<div>" + $( this ).text() + "</div>" );
});
</script>
</body>
</html>
演示结果
用粗体单词替换抽有的段落文本。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>replaceWith demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> <script> $( "p" ).replaceWith( "<b>Paragraph. </b>" ); </script> </body> </html>
演示结果
On click, replace each paragraph with a div that is already in the DOM and selected with the $() function. Notice it doesn't clone the object but rather moves it to replace the paragraph.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>replaceWith demo</title>
<style>
div {
border: 2px solid blue;
color: red;
margin: 3px;
}
p {
border: 2px solid red;
color: blue;
margin: 3px;
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<div>Replaced!</div>
<script>
$( "p" ).click(function() {
$( this ).replaceWith( $( "div" ) );
});
</script>
</body>
</html>
演示结果
On button click, replace the containing div with its child divs and append the class name of the selected element to the paragraph.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>replaceWith demo</title>
<style>
.container {
background-color: #991;
}
.inner {
color: #911;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
<button>Replace!</button>
</p>
<div class="container">
<div class="inner">Scooby</div>
<div class="inner">Dooby</div>
<div class="inner">Doo</div>
</div>
<script>
$( "button" ).on( "click", function() {
var $container = $( "div.container" ).replaceWith(function() {
return $( this ).contents();
});
$( "p" ).append( $container.attr( "class" ) );
});
</script>
</body>
</html>
演示结果