如何用另一个元素替换元素？

Question

我有这个HTML结构：

<div>something</div>
<p>this is a paragraph</p>

现在我想用<p>替换<span>。像这样的东西;

<div>something</div>
<span>this is a span</span>

我想要这样的事情：

$("div").siblings("p"). /* replace with "<span>this is a span</span>" */

注意： <p>周围没有任何包装。所以我不能使用.html()。

嗯，这样做有可能吗？

Answer 1

考虑到给定的html，你可以这样做：

$("div").next("p").replaceWith('<span>This is a span</span>'); 

Answer 2

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

第二个内部<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>

请参阅http://api.jquery.com/replacewith/

Answer 3

您可以使用：

$('p').replaceWith(function(){
    return $("<span />", {html: $(this).html()});
});

请参阅小提琴：http://jsfiddle.net/DIRTY_SMITH/k2swf/592/