Jquery 基础学习笔记之文档处理基础学习笔记之文档处理
本节让我们继续Jquery知识的了解:文档处理。文档处理主要是对HTML元素进行一些增操作,删除操作,复制
操作,替换操作。
主要包括以下几部分:(1)内部插入(2)外部插入(3)包裹(4)替换(5)删除(6)赋值。那我们就开始详细地看一
下。
1、内部插入:向一些元素的内部插入内容、内部插入:向一些元素的内部插入内容
(1)append(content) :向每个匹配的元素内部追加内容,追加到元素内部的末尾,比如
描述:
向所有段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("Hello");
结果:
[ <p>I would like to say: Hello</p> ]
(2)appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中
描述:
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代码:
$("p").appendTo("div");
结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
(3) prepend(content) 向每个匹配的元素内部前置内容
描述:
向所有段落中前置一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("Hello");
结果:
[ <p>HelloI would like to say: </p> ]
(4) prepend() 把所有匹配的元素前置到另一个、指定的元素元素集合中。
描述:
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").prependTo("#foo");
结果:
<div id="foo"><p>I would like to say: </p></div>
2、内部插入:向一些元素的外部插入内容、内部插入:向一些元素的外部插入内容
(1)after(content)在每个匹配的元素之后插入内容。
描述:
在所有段落之后插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("Hello");
结果:
<p>I would like to say: </p>Hello
(2)before() 在每个匹配的元素之前插入内容
描述:
在所有段落之前插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码: