1. 程式人生 > >jQuery DOM節點操作方法大全

jQuery DOM節點操作方法大全

dom jquery 元素操作


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"));


本文出自 “zengestudy” 博客,請務必保留此出處http://zengestudy.blog.51cto.com/1702365/1971505

jQuery DOM節點操作方法大全