jQuery学习——DOM 插入, 内部插入

.append()

描述: 在每个匹配元素里面的末尾处插入参数内容。

  • 添加的版本: 1.0.append( content [, content ] )

    • content
      类型: String, Element, jQuery
      DOM 元素，DOM元素数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾。
    • content
      类型: String, Element, Array, jQuery
      一个或多个DOM元素，元素数组，HTML字符串，或jQuery对象插入到每个匹配元素的末尾。

  • 添加的版本: 1.4.append( function(index, html) )

    • function(index, html)
      类型: Function()
      一个返回HTML字符串，DOM元素，jQuery对象的函数，该字符串用来插入到匹配元素的末尾。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向元素集合中的当前元素。

.append()函数将特定内容插入到每个匹配元素里面的最后面，作为它的最后一个子元素（last child）, (如果要作为第一个子元素 （first child）, 用.prepend()).

.append() 和.appendTo()实现同样的功能。主要的不同是语法——内容和目标的位置不同。对于.append(), 选择器表达式在函数的前面，参数是将要插入的内容。对于.appendTo()刚好相反，内容在方法前面，无论是一个选择器表达式 或创建作为标记上的标记，它都将被插入到目标容器的末尾。

dditional Arguments（额外的参数）

和其他添加内容的方法类似， 例如.prepend() 和 .before(), .append() 还支持传递输入多个参数。支持的输入包括DOM元素，jQuery对象，HTML字符串，DOM元素的数组。

在所有的段落内的尾部，追加一些 HTML。

<script>
  $("p").append("<strong>Hello</strong>");
</script>

在所有的段落内的尾部，追加一个元素。

<script>
  $("p").append(document.createTextNode("Hello"));
</script>

在所有的段落内的尾部，追加一个 jQuery 对象（类似于一个 DOM 元素数组）。

<script>
  $("p").append( $("strong") );
</script>

.appendTo()

描述: 将匹配的元素插入到目标元素的最后面（译者注：内部插入）。

  • 添加的版本: 1.0.appendTo( target )

    • target
      类型: Selector, Element, jQuery
      一个选择符，元素，HTML字符串，DOM元素数组，或者jQuery对象；符合的元素们会被插入到由参数指定的目标的末尾。

.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同。对于.append(), 选择表达式在函数的前面，参数是将要插入的内容。对于.appendTo()刚好相反，内容在方法前面，无论是一个选择器表达式 或创建作为标记上的标记，它都将被插入到目标容器的末尾。

将所有的 span 插入到 ID 为 "foo" 的元素内的末尾。

<!DOCTYPE html>
<html>
<head>
  <style>#foo { background:yellow; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>I have nothing more to say... </span>
 
  <div id="foo">FOO! </div>
<script>$("span").appendTo("#foo"); // check append() examples</script>
 
</body>
</html>

.html()

获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容。

Contents:

  • .html()
    • .html()
  • .html( htmlString )
    • .html( htmlString )
    • .html( function(index, oldhtml) )

.html()返回: String

描述: 获取集合中第一个匹配元素的HTML内容

  • 添加的版本: 1.0.html()

    • 这个方法不接收任何元素。

获取集合中第一个匹配元素的HTML内容

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多个元素，那么只有第一个匹配元素的 HTML 内容会被获取。 

Example: 为每个div设置一些内容。

<!DOCTYPE html>
<html>
<head>
  <style>
  .red { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>Hello</span>
  <div></div>
  <div></div>
  <div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>
 
</body>
</html>

添加了一些html到每个div，然后立刻做进一步的操作来插入的HTML。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; font-size:18px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
<script>
    $("div").html("<b>Wow!</b> Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
              .css("color", "red");
</script>
 
</body>
</html>

.prepend()

描述: 将参数内容插入到每个匹配元素的前面（元素内部）。

  • 添加的版本: 1.0.prepend( content [, content ] )

    • content
      类型: String, Element, jQuery
      DOM元素，元素数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。
    • content
      类型: String, Element, jQuery
      一个或多个DOM元素，元素数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。

  • 添加的版本: 1.4.prepend( function(index, html) )

    • function(index, html)
      类型: Function()
      一个返回HTML字符串，DOM元素，jQuery对象的函数，该字符串用来插入到匹配元素的开始处。 接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向元素集合中的当前元素。

.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).

.prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同。 对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数。而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。

Additional Arguments（额外的参数）

类似的其他内容的添加方法，如.append() 和 .before(), .prepend() 还支持传递输入多个参数。支持的输入包括DOM元素，jQuery对象，HTML字符串，DOM元素的数组。

.prepend() 可以接受任何数量的额外的参数，相同的结果，可以通过传入三个<div>为三个独立的参数实现，就像这样$('body').prepend($newdiv1, newdiv2, existingdiv1)。参数的类型和数量 将在很大程度上取决于在代码中被收集的元素。

Prepends a DOM Element to all paragraphs.

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>is what I'd say</p>
<p>is what I said</p>
<script>$("p").prepend(document.createTextNode("Hello "));</script>
 
</body>
</html>

.prependTo().

prepend()和.prependTo()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同。 对于.prepend() 而言，选择器表达式写在方法的前面，作为待插入内容的容器，将要被插入的内容作为方法的参数。而.prependTo() 正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。

Prepends all spans to the element with the ID "foo"

  
<!DOCTYPE html>
<html>
<head>
  <style>div { background:yellow; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="foo">FOO!</div>
 
  <span>I have something to say... </span>
<script>
// Check prepend() for more examples
$("span").prependTo("#foo");
</script>
 
</body>
</html>

.text()

得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

Contents:

  • .text()
    • .text()
  • .text( textString )
    • .text( textString )
    • .text( function(index, 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() 方法不能使用在 input 元素或scripts元素上。 input 或 textarea 需要使用 .val() 方法获取或设置文本值。得到scripts元素的值，使用.html()方法

从 jQuery 1.4开始， .text()方法返回文本内容和作为元素节点的CDATA 节点。

Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; margin:8px; }
  b { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><b>Test</b> Paragraph.</p>
  <p></p>
<script>
var str = $("p:first").text();
$("p:last").html(str);
</script>
 
</body>
</html>

  • .text( textString )

    • textString
      类型: String
      用于设置匹配元素内容的文本

  • 添加的版本: 1.4.text( function(index, text) )

    • function(index, text)
      类型: Function()
      用来返回设置文本内容的一个函数。接收元素的索引位置和文本值作为参数。

和 .html() 方法不同， .text() 在XML 和 HTML 文档中都能使用。

我们必须意识到这种方法提供了必要的字符串从提供的正确的HTML中脱离出来。这样做， 他调用DOM 方法.createTextNode(), 一种替代的特殊字符与HTML对应（比如< 替换为 &lt; )方法。

.text() 方法不能使用在 input 元素上。 输入的文本需要使用 .val() 方法。

从 jQuery 1.4开始， .text()方法允许我们通过函数来传递文本内容。

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

在段落中添加文本。注意这个<b>标签将从HTML中脱离出来。

<!DOCTYPE html>
<html>
<head>
  <style>
 
  p { color:blue; margin:8px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Test Paragraph.</p>
<script>$("p").text("<b>Some</b> new text.");</script>
 
</body>
</html>

 

posted @ 2013-12-17 16:34  PiLee  阅读(841)  评论(0)  编辑  收藏  举报