jQuery:管理元素

创建元素

$("html");

$() 除了具有获取元素外,还具有创建元素的功能。

$("<h1>标题元素</h1>").prependTo("body");


删除元素

$("A").empty()

$("A").remove([expr])

删除元素,前者无参数,后面参数可有可无。


复制与替换元素

语法 实例 说明
replaceWith(content) $("A").replaceWith("B") 用 B 替换 A
replaceAll(selector) $("A").replaceAll("B") 在 B 替换所有 A
clone() $("A").clone() 复制 A
clone(true) $("A").clone(true) 复制 A 及其已绑定的事件

复制元素与创建元素一样,需要插入到指定位置它才能够被看到,可以使用 appendTo() 或 prependTo() 方法,如 $("p#Indent").clone().prependTo("body")。


在元素内部追加内容

语法 实例 说明
append(Content01) $("A").append("B") 在 A 内部、之后添加 B
appendTo(Content02) $("A").appendTo("B") 在 B 内部、之后添加 A
prepend(Content01) $("A").prepend("B") 在 A 内部、之前添加 B
prependTo(Content02) $("A").prependTo("B") 在 B 内部、之前添加 A

Content01 是字符串或HTML代码,但是必须用双引号或单引号括起。

Content02 是文档中的已有元素。


在元素外部追加内容

语法 实例 说明
insertAfter(Content) $("A").insertAfter("B") 在 B 外部、之后添加 A
insertBefore(Content) $("A").insertBefore("B") 在 B 外部、之前添加 A

Content 是字符串或HTML代码,作为兄弟元素添加到元素前面或后面。如果控制对象是多个元素,那么在每个元素前面会同时添加相同字符串。


包裹元素

语法 实例 说明
wrap(html) $("A").wrap("B") 为每一个 A 元素创建父元素 B
wrapAll(html) $("A").wrapAll("B") 将多个 A 元素作为一个集合,并为其创建父元素 B
wrapInner(html) $("A").wrapInner("B") 将多个 A 元素作为一个集合,并为其创建父元素 B

我是段落元素 ①

我是段落元素 ②

我是段落元素 ①

我是段落元素 ②

  • <p>我是段落元素 ①</p>
  • <p>我是段落元素 ②</p>
  • $("p").wrap("<div style='border:1px solid #f00;'></div>");

我是段落元素 ①

我是段落元素 ②

我是段落元素 ①

我是段落元素 ②

  • <p>我是段落元素 ①</p>
  • <p>我是段落元素 ②</p>
  • $("p").wrapAll("<div style='border:1px solid #f00;'></div>");