如何用另一個元素替換元素？

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，你可以這樣來做：

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/