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>
可以通过下图,详细查看执行后的效果
备注: 上述可以看出, 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内容之前,添加部分内容
输出的结果如下图所示:
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内容
|