苏飞论坛

标题: jQuery文档处理之内部插入用法讲解大全 [打印本页]

---

作者: 范范    时间: 2018-3-21 22:39
标题: jQuery文档处理之内部插入用法讲解大全

jQuery文档处理之内部插入用法讲解大全

       jQuery的 文档处理 ，顾名思义，就是动态的处理页面的html内容，一般我会经常会碰见的，就是给页面的某一个特定的地方，替换html，增加html，或者删减部分html。
      本次主要了解，jQuery文档处理 中的 内部插入 的部分内容。

jQuery文档处理的内容插入 主要有如下的4种：

---

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

1. append(content|fn)  向每个匹配的元素内部追加内容。

2. appendTo(content)  把所有匹配的元素追加到另一个指定的元素元素集合中。

3. prepend(content|fn)  向每个匹配的元素内部前置内容。

4. prependTo(content)  把所有匹配的元素前置到另一个、指定的元素元素集合中。

下面就逐个进行讲解
1. append(content|fn)

---

       向每个匹配的元素内部追加内容。
content： 要追加到目标中的内容

jQuery代码：

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

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

返回结果：

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

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

附件html代码：

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

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

可以通过下图，详细查看执行后的效果
(, 下载次数: 179)

上传

点击文件名下载附件


备注： 上述可以看出， append 为向当前匹配元素的html后面，增加部分内容


2. appendTo(content)  

---

把所有匹配的元素追加到另一个指定的元素元素集合中。
注：使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中

jQuery代码：

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

$("p").appendTo("div");

返回结果：

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

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

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

附件HTML代码：

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

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

<div></div><div></div>

备注详解：
从以上内容可看出，是把所有的 p 元素内容，添加的div中   
即： appendTo   括号里面的是被指定，需要添加内容的元素


3. prepend(content|fn)  

---

向每个匹配的元素内部前置内容。

jQuery代码：

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

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

输出结果：

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

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

附件html代码：

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

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

备注：
从字面上就可以看出，jQuery 中的pre 基本上都是前的意思，所有从上述内容中可以看出，  prepend 就是在匹配元素的html内容之前，添加部分内容
输出的结果如下图所示：
(, 下载次数: 180)

上传

点击文件名下载附件


4. prependTo(content)  

---

把所有匹配的元素前置到另一个、指定的元素元素集合中。


jQuery代码：

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

$("p").prependTo("#foo");

输出结果：

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

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

附件html代码：

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

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

备注：
从上述实例可以看出， 是 把p元素的内容，添加到id为foo的元素中，作为id为foo的html内容

---

作者: 站长苏飞    时间: 2018-3-22 09:04
强烈支持楼主ing……

---

作者: 范范    时间: 2018-3-22 22:22
谢谢老大支持

---

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

Powered by Discuz! X3.4