jQuery | replaceAll() 与示例

简介

在 jQuery 中，replaceAll() 方法用于将指定的 HTML 元素替换成另一个 HTML 元素。与 .replaceWith() 方法相似，.replaceAll() 方法会将指定的元素替换为选择器表达式所匹配的其他元素，同时还可以将多个元素替换为一个元素。

语法

$(selector).replaceAll(target)

参数

target：一个选择器表达式，用于指定被替换的元素。

示例

<!-- HTML -->
<div id="box"></div>
<p>这是一个段落。</p>

// JS
$('p').replaceAll('#box');

上述代码将段落元素替换掉原本的 id="box" 的 div 元素。

多个元素替换成一个元素的示例

<!-- HTML -->
<ul>
  <li>苹果</li>
  <li>梨</li>
  <li>香蕉</li>
  <li>鸭梨</li>
</ul>

// JS
$('<li>梨子</li>').replaceAll('li:contains("梨")');

上述代码会将列表中所有包含“梨”的列表项替换为一个新的列表项，新列表项的文本内容为“梨子”。

替换成动态创建的元素

// JS
$('<p>这是一个新段落。</p>').replaceAll('ul');

上述代码会将整个列表替换成一个新建的段落元素。

注意事项

• 如果选择器表达式匹配到多个元素，则只有第一个元素会被替换；
• 替换前后两个选择器表达式的元素数量必须一致，否则会抛出异常；
• .replaceAll() 方法是jQuery 1.4 版本新增加的方法。