jQuery replaceWith() 方法

jQuery 中的 replaceWith() 方法用于将选定的元素替换为新元素。此方法将匹配的元素替换为指定的 HTML 元素。它返回被替换的元素。此方法类似于 replaceAll() 方法。

语法

参数值

replaceWith() 方法的参数值定义如下。

newContent: 这是一个必需参数。它是替换选定元素的内容。它可以是 HTML 元素、DOM 元素或 jQuery 对象。

function(index): 这是一个可选参数。它是返回要替换内容的函数。它包含一个参数 index。index 参数用于返回元素的索引位置。

让我们看一些例子来理解如何使用 replaceWith() 方法。

示例 1

在此示例中，有两个 div 元素、一个段落元素和一个按钮，我们将对它们应用 replaceWith() 方法。这里我们使用的是 replaceWith() 方法的 newContent 参数。

点击按钮后，id = "d1" 的 div 元素被替换为标题 h1，id = "d2" 的 div 元素被替换为标题 h2。id = "p1" 的段落元素的文本被替换为新内容，id = "btn" 的按钮被替换为一个新的 div 元素，其 id = "d3"。

输出

执行上述代码后，输出将是 -

单击给定按钮后，输出将是 -

现在，在下一个示例中，我们将使用 replaceWith() 方法的 function(index) 参数。

示例 2

在此示例中，有一些段落元素和一些 div 元素。我们正在对所有 div 元素和 class = "para" 的段落元素应用 replaceWith() 方法。点击给定的按钮后，具有相应类的 段落 元素被替换为标题 h4，div 元素被替换为标题 h3。

这里，我们使用的是 replaceWith() 函数的 function(index) 参数。在输出中我们可以看到元素的索引位置。

输出

执行上述代码后，输出将是 -

单击给定按钮后，输出将是 -