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>