返回值:jQueryreplaceWith(newContent)

根据指定的内容，替换每个匹配的元素。

.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>

第二个 inner <div> 会被指定的 HTML 替换掉: 

$('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>

可能一次替换所有 inner <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 对象。对于该方法而言，该对象指向已经从 DOM 中被移除的对象，而不是指向替换用的对象。

从 jQuery 1.4 开始, .replaceWith() 方法也可以用于断开的 DOM 节点（disconnected DOM nodes，即，只有结束标签的元素）。例如，执行完下面的 .replaceWith()，其结果是只返回了一个段落： 

$("<div/>").replaceWith("<p></p>");

.replaceWith() 方法也可以使用一个函数作为参数： 

$('div.container').replaceWith(function() {
  return $(this).contents();
});

上面代码的执行结果是 <div class="container"> 被它下面的三个子节点 <div> 替换了。当使用函数作为参数时，函数的返回值可以是 HTML 字符串, DOM 节点, 或 jQuery 对象。

示例:

点击按钮后，将按钮替换成一个 div，并且 div 的内容就是该按钮上的文字。

<!DOCTYPE html>
<html>
<head>
<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="jquery.min.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>
<head>
<script src="jquery.min.js"></script>
</head>
<body>


<p>Hello</p>
<p>cruel</p>
<p>World</p>


<script>


$("p").replaceWith( "<b>Paragraph. </b>" );


</script>
</body>
</html>

演示:

示例:

点击段落后，使用页面上的 div 元素替换所选的段落。注意，只是将页面上的 div 移动到所选的段落处，而不是将克隆后的 div 移动到所选的段落处。

<!DOCTYPE html>
<html>
<head>
<style>
  div { border:2px solid blue; color:red; margin:3px; }
  p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }
  </style>
<script src="jquery.min.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>

演示:

示例:

点击按钮，将样式为 container 的 div 替换成它所包含的内容，并在段落内的结尾处，显示该 div 的样式名。

<!DOCTYPE html>
<html>
<head>
<style> 
  .container { background-color: #991; }
  .inner { color: #911; }
  </style>
<script src="jquery.min.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').bind("click", function() {
  var $container = $("div.container").replaceWith(function() {
    return $(this).contents();
  });

  $("p").append( $container.attr("class") );
});


</script>
</body>
</html>

演示: