jQuery DOM节点操作方法大全

简介:

append(content | fn):向每个匹配的元素内部追加内容。参考:http://jquery.cuishifeng.cn/append.html

例如:向所有段落中追加一些HTML标记。

<p>I would like to say: </p>
$("p").append("<b>Hello</b>");
[ <p>I would like to say: <b>Hello</b></p> ]


appendTo():这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中

例如:把所有段落追加到ID值为foo的元素中。

<p>I would like to say: </p>
<div></div><div></div>
$("p").appendTo("div");
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

prepend():向每个匹配的元素内部前置内容

例如:向所有段落中前置一些HTML标记代码。

<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");
[ <p><b>Hello</b>I would like to say: </p> ]


prependTo(content):

把所有匹配的元素前置到另一个、指定的元素元素集合中。实际上,使用这个方法是颠倒了常规的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。

例如:把所有段落追加到ID值为foo的元素中。

<p>I would like to say: </p><div id="foo"></div>
$("p").prependTo("#foo");
<div id="foo"><p>I would like to say: </p></div>


after():在每个匹配的元素之后插入内容。插入的元素和被插入的元素属于同一级,非父子级关系

例如:在所有段落之后插入一些HTML标记代码。

<p>I would like to say: </p>
$("p").after("<b>Hello</b>");
<p>I would like to say: </p><b>Hello</b>


before():在每个匹配的元素之前插入内容。

例如:在所有段落之前插入一些HTML标记代码

<p>I would like to say: </p>
$("p").before("<b>Hello</b>");
[ <b>Hello</b><p>I would like to say: </p> ]


insertAfter():把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上,使用这个方法是颠倒了常规的$(A).after(B)的操作,即不是把B插入到A后面,而是把A插入到B后面

例如:把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

<p>I would like to say: </p><div id="foo">Hello</div>
$("p").insertAfter("#foo");
<div id="foo">Hello</div><p>I would like to say: </p>


insertBefore():把所有匹配的元素插入到另一个、指定的元素元素集合的前面。实际上,使用这个方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。

例如:把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。

<div id="foo">Hello</div><p>I would like to say: </p>
$("p").insertBefore("#foo");
<p>I would like to say: </p><div id="foo">Hello</div>


wrap():把所有匹配的元素用其他元素的结构化标记包裹起来。

这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函数。因此,如果要添加文本应该在包裹完成之后再行添加。

例如:用于包装目标元素的DOM元素

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>


unwrap():这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素(以及他们的同辈元素)会在DOM结构上替换他们的父元素。

例如:用ID是"content"的div将每一个段落包裹起来

<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>

$("p").unwrap()

<p>Hello</p>
<p>cruel</p>
<p>World</p>


wrapAll():将所有匹配的元素用单个元素包裹起来

这于 '.wrap()'<a href="http://docs.jquery.com/Manipulation/wrap" title="Manipulation/wrap"></a> 是不同的,'.wrap()'为每一个匹配的元素都包裹一次。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素。

例如:用一个生成的div将所有段落包裹起来

$("p").wrapAll("<div></div>");
或者
$("p").wrapAll(document.createElement("div"));









本文转自 曾哥最爱 51CTO博客,原文链接:http://blog.51cto.com/zengestudy/1971505,如需转载请自行联系原作者

目录
相关文章
|
1天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时,我们常需提取各元素值,这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点,并输出它们的名称和值:例如 &quot;title: Everyday Italian&quot;,&quot;author: Giada De Laurentiis&quot; 等。
|
1天前
|
存储 JavaScript
DOM 节点列表长度(Node List Length)
名为 &quot;title&quot; 的元素节点,并存储在节点列表 x 中。通过 &quot;length&quot; 属性确定 x 的长度(即 &quot;title&quot; 节点总数)。利用 for 循环遍历整个列表,访问每个 &quot;title&quot; 节点的第一个子节点的值,并将其写入文档。
|
4天前
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
6 1
|
5天前
|
存储 JSON JavaScript
jQuery 方法大全
jQuery 方法大全
|
7天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时,我们常需提取各元素值,这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点,并输出它们的名称和值:例如 &quot;title: Everyday Italian&quot;,&quot;author: Giada De Laurentiis&quot; 和 &quot;year: 2005&quot;。实现步骤包括:加载XML字符串到xmlDoc对象,获取根元素子节点,然后遍历并输出每个子节点的信息。
|
9天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时,我们常需提取各元素值,这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点,并输出它们的名称和值:例如 &quot;title: Everyday Italian&quot;,&quot;author: Giada De Laurentiis&quot; 和 &quot;year: 2005&quot;。此例首先将XML字符串加载至xmlDoc中,接着获取根元素的子节点,并逐一输出每个子节点的信息。
|
3天前
|
存储 JavaScript
DOM 节点列表长度(Node List Length)
名为 &quot;title&quot; 的元素节点,并存储在节点列表 x 中。通过 &quot;length&quot; 属性确定 x 的长度(即 &quot;title&quot; 节点总数)。利用 for 循环遍历整个列表,访问每个 &quot;title&quot; 节点的第一个子节点的值,并将其写入文档。
|
3天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时,我们常需提取各元素值,这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点,并输出它们的名称和值:例如 &quot;title: Everyday Italian&quot;,&quot;author: Giada De Laurentiis&quot; 和 &quot;year: 2005&quot;。实现步骤包括:加载XML字符串至xmlDoc;获取根元素子节点;输出各子节点名称及文本节点值。
|
4天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时,我们常需提取各元素值,这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点,并输出它们的名称和值:例如 &quot;title: Everyday Italian&quot;,&quot;author: Giada De Laurentiis&quot; 等。
|
4天前
|
存储 JavaScript
DOM 节点列表长度(Node List Length)
名为 &quot;title&quot; 的元素节点,并存储在节点列表 x 中。通过 &quot;length&quot; 属性确定 x 的长度(即 &quot;title&quot; 节点总数)。利用 for 循环遍历整个列表,访问每个 &quot;title&quot; 节点的第一个子节点的值,并将其写入文档。