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

时间:2016-03-14 21:55:56

标签: javascript jquery html

我有这个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()

嗯,这样做有可能吗?

3 个答案:

答案 0 :(得分:1)

考虑到给定的html,你可以这样做:

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

答案 1 :(得分:1)

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/

答案 2 :(得分:1)

您可以使用:

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

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