jQuery的replaceWith和replaceAll方法有什么不同?

分类:教程 日期:

jQuery 有两个方法 replaceWith 和 replaceAll,它们都是用来替换目前元素的,并且看起来也很像,那它们有什么区别呢?

最简单的理解就是:replaceWith 是把前面的替换成后面的;replaceAll 则是把后面的替换成前面的。

我们来看具体的例子,假设有如下代码:

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

1、使用 replaceWith 方法:

$('.second').replaceWith('<h2>New text</h2>')

得到的结果是:

<div class="dowebok">
    <div class="inner first">Hello</div>
    <h2>New text</h2>
    <div class="inner third">Goodbye</div>
</div>

回到上面的 js 代码,也就是前面的 .second 元素被替换成了后面的 <h2>New text</h2>

2、如果使用 replaceAll 方法:

$('<h2>New heading</h2>').replaceAll('.second')

得到的结果如下(和上面一样):

<div class="dowebok">
    <div class="inner first">Hello</div>
    <h2>New text</h2>
    <div class="inner third">Goodbye</div>
</div>

回到上面的 js 代码,也就是后面的 .second 的元素被替换成了前面的 <h2>New text</h2>

现在明白了 replaceWith 和 replaceAll 区别了吧。