苏飞论坛

标题: jQuery中实现替换html的操作大全 [打印本页]

作者: 范范 时间: 2018-3-26 22:48
标题: jQuery中实现替换html的操作大全

jQuery中实现替换html的操作大全

替换html内容，在开发中也是经常遇到的，我这版经常使用的方法是直接给匹配元素的html赋值，这样的话，一般用在根据id选择器，选择到的单个匹配元素进行修改html内容。今天主要说下jQuery文档处理中的替换操作

jQuery文档处理 中，实现替换的方法主要有如下两种：

[C#] 纯文本查看 复制代码

1. replaceWith(content|fn)  将所有匹配的元素替换成指定的HTML或DOM元素。

2. replaceAll(selector)  用匹配的元素替换掉所有 selector匹配到的元素。

1. replaceWith(content|fn)

将所有匹配的元素替换成指定的HTML或DOM元素。
a. content参数实例
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("p").replaceWith("<b>paragraph. </b>")

输出结果：

[JavaScript] 纯文本查看 复制代码

<b>paragraph. </b><b>paragraph. </b><b>paragraph. </b>

附件html：

[HTML] 纯文本查看 复制代码

<p>Hello</p><p>cruel</p><p>World</p>

从上例可以看出，
实现了，将所有p元素的内容，替换为 Paragraph.

b. fn 参数实例
jQuery代码：

[JavaScript] 纯文本查看 复制代码

$('.third').replaceWith($('.first'))

输出结果：

[HTML] 纯文本查看 复制代码

<div class="container">

  <div class="inner second">And</div>

  <div class="inner first">Hello</div>

</div>

附件html代码：

[HTML] 纯文本查看 复制代码

<div class="container">

  <div class="inner first">Hello</div>

  <div class="inner second">And</div>

  <div class="inner third">Goodbye</div>

</div>

从上例可以看出，
实现的效果为，用第一段内容，替换第三段内容

备注
通过上例可以清晰的看出，replaceWith 方法，是 直接将匹配到的内容，移动到目标为来替换，并不是复制一份去替换

2. replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。

实例jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("<b>Paragraph. </b>").replaceAll("p"

输出结果：

[HTML] 纯文本查看 复制代码

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

附件html：

[HTML] 纯文本查看 复制代码

<p>Hello</p><p>cruel</p><p>World</p>

从上例可以看出，
实现了，将 所有的段落标记p，替换为加粗的b标记

作者: 站长苏飞 时间: 2018-3-27 17:39
强烈支持楼主ing……

欢迎光临苏飞论坛 (http://www.sufeinet.com/)