.replaceWith()

.replaceWith( newContent ) 返回:jQuery

描述:用提供的内容替换所有匹配的元素。

  • version added: 1.2.replaceWith( newContent )

    newContent用来插入的内容,可能是HTML字符串,DOM元素,或者jQuery对象。

  • version added: 1.4.replaceWith( function )

    function返回THML字符串,用来替换的内容。

.replaceWith()可以从DOM中移除内容,然后在这个地方插入新的内容。请看下面的例子:

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

我们可以用指定的HTML替换第二个 inner <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>:

$('.inner').replaceWith('<h2>New heading</h2>');

结果如下:

<div class="container">
  <h2>New heading</h2>
  <h2>New heading</h2>
  <h2>New heading</h2>
</div>

或者我们可以选择一个元素把它当做替换的内容:

$('.third').replaceWith($('.first'));

结果如下:

<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>

从这个例子中,我们可以看出用选中的元素替换目标是移动而不是复制。

.replaceWith()方法,和大部分其他jQuery方法一样,返回jQuery对象,所以可以喝其他方法链接使用,但是需要注意的是:返回的jQuery对象是和被移走的元素相关联,而不是新插入的元素。/p>

在jQuery 1.4中 .replaceWith(), .before(), 和.after()都对分离的DOM元素有效。请看下面的例子:

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

.replaceWith()返回一个包含div的jQuery对象。

例子:

例子:点击按钮,用包含同样文字的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="http://code.jquery.com/jquery-latest.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>

Demo:

例子:用粗体字替换所有段落。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>

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

</body>
</html>

Demo:

例子:用空的div替换所有段落。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { border:2px solid blue; margin:3px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <p>Hello</p>

  <p>cruel</p>
  <p>World</p>
<script>$("p").replaceWith(document.createElement("div"));</script>

</body>
</html>

Demo:

例子:点击,用DOM中现存的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="http://code.jquery.com/jquery-latest.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>

Demo:

jQuery 1.6 API 中文版脚本之家整理、修订 (2011年6月)