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标记
|