jQuery文檔操作-DOM插入操作-元素內部

.append( content [, content]  )

添加參數指定的內容到每個匹配元素的內部的末尾

.append(content[,content])

.append(function(index,html))

content ①

類型字符串，元素，jQuery

DOM元素，HTML字符串，或者jQuery對象來插入到每個匹配元素後面

content ②

類型是字符串，元素，數組，jQuery

一個或多個額外的DOM元素，元素數組，HTML字符串或者jQuery對象來插入到每個匹配元素的後面。

function(index,html)

類型是函數。

一個函數返回一段HTML字符串，DOM元素或者jQuery對象來插入到每一匹配元素的後面。接受集合中元素的索引的位置和元素HTML的值做爲參數。在這個函數中，this指向集合中當前的元素。

.append()方法爲每一個元素的添加最後一個孩子（使用.prepend()添加到元素的第一個孩子）

.append()和.appendTo()方法執行的是相同的任務。主要的不同是在語法上的區別，內容和目標的相對位置不同。使用.append()方法時，方法前面的選擇器就是內容會被添加進去的容器。使用.appemdTo()方法時，相反的，被添加的內容是在方法前面的，既不是選擇器表達式也不是動態創建的標記，並且它會被添加到目標容器中。

如下html：

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

你能創建內容，並立刻把它添加到元素當中：

$('.inner').append('<p>Test</p>');

每一個inner <div>元素獲得了這個新的內容：

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p> //here!
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p> //here!
  </div>
</div>

你也可以在這個頁面上獲取一個元素，並且把它添加到另個一元素中去：

$('.container').append($('h2'));

如果一個像這樣被選擇的元素被添加到文檔的其他地方，它會被移到目標元素中去（不是複製）：

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

如果不止一個目標元素，不管怎樣，會爲每一個目標元素創建該元素的副本。

和其他內容添加方法一樣，如.prepend()和.berfore(),append()也支持傳遞多個參數作爲輸入。支持的輸入包括DOM元素，jQuery對象，html串和DOM元素的數組。

如下會爲body元素添加兩個新的<div>和一個存在的<div>：

var $newdiv1 = $('<div id="object1"/>'),
    newdiv2 = document.createElement('div'),
    existingdiv1 = document.getElementById('foo');

$('body').append($newdiv1, [newdiv2, existingdiv1]);

由於，.append()方法能接收任何個數的額外參數，希望得到同樣的效果，可以使用分開的參數傳遞三個<div>s，如$('body').append($newdiv1, newdiv2, existingdiv1).參數的類型和個數很大程度上取決於你如何在代碼中處理元素。

.appendTo( target )

添加每一個匹配的元素到指定的目標元素內部的後面

.appendTo(target)

target

類型是選擇器，元素，jQuery

一個選擇器，元素，HTML字符串或者jQuery對象；通過這個參數指定的匹配的元素會被插入到該元素的後面。

.prepend( content [, content]  )

添加參數指定的內容到每個匹配元素的內部的開頭

.prepend(content[,content])

.prepend(function(index,html))

content  ①

類型是字符串，元素，jQuery

DOM元素，元素的數組，HTML字符串或者jQuery對象插入到每個匹配元素的開頭。

content  ②

類型是字符串，元素，jQuery

一個或多個額外的DOM元素，元素數組，HTML字符串或者jQuery對象插入到每個匹配元素的開頭。

function(index,html)

類型是函數。

一個函數返回一段HTML字符串，DOM元素或者jQuery對象插入到每個匹配元素的開頭。接收集合中元素所在的索引的位置和原來元素的HTML的值做爲參數。在這個函數中，this指向的是集合中當前的元素。

.prependTo( target )

 添加每一個匹配的元素到指定的目標元素內部的開頭

.prependTo(target)

target

類型是選擇，元素，jQuery。

一個選擇器，元素，HTML字符串或者jQuery對象；匹配元素會被插入到通過參數指定的元素開頭。

上述三種方法性質和第一種append()方法相同，在此不再贅述。

.text()

獲取匹配元素中組合的文本內容，包括他們的子孫。

.text()

這個方法不接受任何參數。

和.html()方法不同的是，.text()能夠在xml和html文檔中使用。.text()方法的結果是包含匹配元素組合的文本內容的字符串（取決於不同瀏覽器的對HTML解析的不同，返回的文本也許會有換行和空格的差異）。

如下html：

  <div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
  <li>list item 1</li>
  <li>list <strong>item</strong> 2</li>
  </ul>
  </div>

這個$('div.demo-container').text()會產生如下結果:

Demonstration Box list item 1 list item 2

.text()方法不能被用在表單的inputs或者腳本上。設置和獲取input或者textarea的文本值，可以使用.val()方法。獲取腳本元素的值可以使用.html()方法。

jQuery1.4，.text()方法返回文本的值和文本數據(CDATA)節點以及元素節點。

.text( textString )

設置匹配元素中的內容爲指定的文本內容。

.text(textString)

.text(function(index,text))

textString

類型是字符串。

一個字符串文本來設置每個匹配元素的內容。

function(index,text)

類型是函數。

一個函數返回的是用來設置的文本。接受集合中元素索引的位置和原來的文本值做爲參數。

和.html()方法不同的是，.text()能夠在xml和html文檔中使用。

我們需要意識到這個方法提供了必要的對字符串的轉義，因此能在HTML中正確的渲染。這樣做，它調用了DOM的方法.createTextNode()，這個方法會用對應的HTML的字符實體替換這些特殊字符（如&lt;對於<）。

如下html:

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

代碼$('div.demo-container').text('<p>This is a test.</p>');會生成如下的DOM輸出：

<div class="demo-container">
&lt;p&gt;This is a test.&lt;/p&gt;
</div>

在頁面上顯示如下：

<p>This is a test</p>

.text()方法不能夠在input元素上使用，對於input類型的文本，使用.val()方法。

jQuery1.4,.text()方法允許我們通過函數傳遞設置文本的內容。

$('ul li').text(function(index) {
  return 'item number ' + (index + 1);
});

給出三個無序的列表，這個例子會產生如下的DOM輸出：

<ul>
  <li>item number 1</li>
  <li>item number 2</li>
  <li>item number 3</li>
</ul>