.replaceWith()

分类: Manipulation > DOM Replacement

.replaceWith( newContent )返回: jQuery

描述: 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

  • 添加的版本: 1.2.replaceWith( newContent )

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

  • 添加的版本: 1.4.replaceWith( function )

    • function
      类型: Function()
      一个函数，返回的内容会替换匹配的元素集合。

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

1
2
3
4
5
 
<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> ：

1
 
$('div.second').replaceWith('<h2>New heading</h2>');

结果如下：

1
2
3
4
5
 
<div class="container">
  <div class="inner first">Hello</div>
  <h2>New heading</h2>
  <div class="inner third">Goodbye</div>
</div>

同样我们也可以一次性替换所有inner<div>:

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

结果如下：

1
2
3
4
5
 
<div class="container">
  <h2>New heading</h2>
  <h2>New heading</h2>
  <h2>New heading</h2>
</div>

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

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

结果如下：

1
2
3
4
 
<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>

从这个例子可以看出，用来替换的元素从老地方移到新位置，而不是复制。

.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用， 但是需要注意的是： （original）原始jQuery对象被返回。该对象指向已经从 DOM 中被移除的对象，而不是指向已经取代了它的新元素。

从jQuery 1.4开始 .replaceWith()都对分离的DOM元素有效。请看下面的例子，.replaceWith()返回一个jQuery集合子包含一个段落：

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

.replaceWith()方法也可以接受一个函数作为它的参数：

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

这个结果<div class="container">被它的三个子元素<div>替换。函数的返回值可能是一个HTML字符串，DOM元素，或jQuery对象。

其他注意事项:

  • .replaceWith() 方法会删除与节点相关联的所有数据和事件处理程序 。
  • 在此之前的jQuery1.9，如果该集合中的第一个节点没有在文档中， .replaceWith()将尝试在当前的jQuery集合中添加或更改的节点，在这些情况下返回一个新的jQuery集合，而不是原来的集合。 该方法是否返回一个新的结果，取决于它参数的个数和是否参数节点是否在文档中。 在jQuery1.9中，.after(), .before(), 和 .replaceWith()总是返回原始未修改的集合。 尝试在节点上使用这些方法，而不影响父级元素，即，既不是该集合也不是包含他的节点被改变。

例子:

Example: 点击按钮，用包含同样文字的div替换按钮：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!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="//code.jquery.com/jquery-latest.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:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html>
<html>
<head>
  <script src="//code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
<script>
$("p").replaceWith( "<b>Paragraph. </b>" );
</script>
 
</body>
</html>

Demo:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!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="//code.jquery.com/jquery-latest.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:

Example: On button click, replace the containing div with its child divs and append the class name of the selected element to the paragraph.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<!DOCTYPE html>
<html>
<head>
  <style>
  .container { background-color: #991; }
  .inner { color: #911; }
  </style>
  <script src="//code.jquery.com/jquery-latest.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>

Demo: