jQuery文档处理之外部插入html方法解析大全

范范

jQuery文档处理之外部插入html方法解析大全

本次主要讲解jQuery文档处理-外部插入的各个方法详解。  主要也是处理页面的html内容，是对给定页面元素的前面添加部分html，或者后面添加部分html等，这些内容，很多都应用在ajax中，在获取到数据后，对页面的html进行调整。

文档处理-外部插入主要有如下内容：

---

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

1. after(content|fn)  在每个匹配的元素之后插入内容。
2. before(content|fn)  在每个匹配的元素之前插入内容。
3. insertAfter(content)  把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
4. insertBefore(content)  把所有匹配的元素插入到另一个、指定的元素元素集合的前面

下面就对各个内容进行详细讲解
1. after(content|fn)  

---

在每个匹配的元素之后插入内容。

参数详解：

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

1. content  插入到每个目标后的内容，包括（String, Element, jQuery）。
2. fn(function)  函数必须返回一个html字符串。

具体实例讲解如下
实例1：（实现参数 content为 string 的添加）
jQuery代码：

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

$("p").after("<b>Hello</b>")

输出结果：

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

<p>I would like to say: </p><b>Hello</b>

附件html：

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

<p>I would like to say: </p>

实例2：（实现参数 content为 Element 的添加）
jQuery代码：

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

$("p").after( $("#foo")[0] )

输出结果：

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

<p>I would like to say: </p><b id="foo">Hello</b>

附件html内容：

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

<b id="foo">Hello</b><p>I would like to say: </p>

实例3：（实现参数 content为 jQuery 的添加）
jQuery代码：

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

$("p").after( $("b") )

输出结果：

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

<p>I would like to say: </p><b>Hello</b>

附件HTML：

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

<b>Hello</b><p>I would like to say: </p>

备注：
以上内容可以看出，所有的实例，虽然后说参数是各个样子的，但是输出的结果都是在 原有的p标签后面，添加了内容 （<b>Hello</b>）   



2. before(content|fn)

---

在每个匹配的元素之前插入内容。
此方法，与after相反，是在匹配元素前插入内容，但是用法跟after是一样的。

故：参数与 after是一样的，如下所示：

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

1. content  插入到每个目标后的内容，包括（String, Element, jQuery）。
2. fn(function)  函数必须返回一个html字符串。

实例讲解如下
jQuery代码：

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

$("p").before("<b>Hello</b>")

输出结果：

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

[ <b>Hello</b><p>I would like to say: </p> ]

附件html内容：

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

<p>I would like to say: </p>

备注：
从以上输出内容可以看出，相同的jQuery写法，此次before的输出结果刚好与after相反，是在 p标签的前面，添加了（<b>Hello</b>）   的html内容
其他的参数方法就不在一一写出了，与after是一样的用法

3. insertAfter(content)  

---

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

实例1（将 p 内容添加到 #foo 后）：
jQuery代码：

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

$("p").insertAfter("#foo")

输出结果：

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

<div id="foo">Hello</div><p>I would like to say: </p>

附件HTML：

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

<p>I would like to say: </p><div id="foo">Hello</div>

备注：
从以上内容可以清楚的看出，实际上，insertAfter  是 颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是 把A插入到B后面
故可以看出，insertAfter 在该处的使用方法与 $("#foo").after("p") 是一样的


4. insertBefore(content)  

---

把所有匹配的元素插入到另一个、指定的元素元素集合的前面


实例1（将  p 内容添加到 #foo 前）：
jQuery代码：

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

$("p").insertBefore("#foo")

输出结果：

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

<p>I would like to say: </p><div id="foo">Hello</div>

附件html：

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

<div id="foo">Hello</div><p>I would like to say: </p>

备注：
从以上内容可以清楚的看出，实际上， insertBefore 是 颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是 把A插入到B前面
故可以看出，insertBefore 在该处的使用与 $("#foo").before("p")  是一样的

站长苏飞

我只是路过打酱油的。