文章目录

  • jQuery文档操作常用方法1
  • 内部插入
  • 1.appendTo( )
  • 2.prependTo( )
  • 外部插入
  • 1.insertAfter( )
  • 2.insertBefore( )

  • 替换
  • 1.replaceWith()
  • 2.replaceAll( )
  • 删除
  • 1.remove( )
  • 2.empty( )


jQuery文档操作常用方法1

内部插入

1.appendTo( )

appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。

语法:

$(content).appendTo(selector)

参数

描述

content

必需。规定要插入的内容(可包含 HTML 标签)。

selector

必需。规定把内容追加到哪个元素上。

实例:

$("button").click(function(){
  $("<b>Hello World!</b>").appendTo("p");	//在每个 p 元素结尾处插入粗体内容
});

2.prependTo( )

prependTo() 方法在被选元素的开头(仍位于内部)插入指定内容。

语法:

$(content).prependTo(selector)

参数

描述

content

必需。规定要插入的内容(可包含 HTML 标签)。

selector

必需。规定在何处插入内容

实例:

$("button").click(function(){
    $("<b>Hello World!</b>").prependTo("p");	//在每个p元素的开始处插入粗体内容
})

外部插入

1.insertAfter( )

insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。(和内部插入不同,这里是插入到被选元素的后面,而不是被选元素内的结尾处)。

如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之后

语法:

$(content).insertAfter(selector)

参数

描述

content

必需。规定要插入的内容。可能的值: 选择器表达式 HTML 标记

selector

必需。规定在何处插入内容

实例:

$("button").click(function(){
    $("<b>Hello World!</b>").insertAfter("p");	//在每个p元素的后面插入b元素
})

2.insertBefore( )

insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。

如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之前。

语法:

$(content).insertBefore(selector)

参数

描述

content

必需。规定要插入的内容。可能的值: 选择器表达式 HTML 标记

selector

必需。规定在何处插入内容

实例:

$("button").click(function(){
    $("<b>Hello World!</b>").insertBefore("p");	//在每个p元素的前面插入b元素
})

替换

1.replaceWith()

replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。

语法:

$(selector).replaceWith(content)

参数

描述

content

必需。规定替换被选元素的内容。 可能的值: HTML 代码 - 比如 ("



") 新元素 - 比如 (document.createElement(“div”)) 已存在的元素 - 比如 ($(".div1")) 。已存在的元素会覆盖被替换的元素,然后起初的元素会消失

selector

必需。规定要被替换的元素

实例:

$("button").click(function(){
    $("p").replaceWith("<b>Hello World!</b>");	//把每个p元素替换成b元素
})

2.replaceAll( )

replaceAll() 方法用指定的 HTML 内容或元素替换被选元素。

语法:

$(content).replaceAll(selector)

参数

描述

content

必需。规定替换被选元素的内容。 可能的值: HTML 代码 - 比如 ("



") 新元素 - 比如 (document.createElement(“div”)) 已存在的元素 - 比如 ($(".div1")) 。已存在的元素会覆盖被替换的元素,然后起初的元素会消失

selector

必需。规定要被替换的元素

实例:

$("button").click(function(){
    $("<b>Hello World!</b>").replaceAll("p");	//把每个p元素替换成b元素
})

replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。

删除

1.remove( )

remove() 方法移除被选元素,包括所有文本和子节点。

该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。

这一点与 detach() 不同。detach()方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。

而empty() 方法从被选元素移除所有内容,包括所有文本和子节点。

语法:

$(selector).remove()

参数

描述

selector

必需。要删除的元素

实例:

$("button").click(function(){
   $("p").remove();		//移除所有p元素
})

2.empty( )

empty() 方法从被选元素移除所有内容,包括所有文本和子节点。

语法:

$(selector).empty()

参数

描述

selector

必需。要删除内容的元素

实例:

$("button").click(function(){
    $("p").emptye();		//移除所有p元素中的内容
})