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

.after()

描述: 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

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

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

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

  • function(index)
    类型: Function()
    一个返回HTML字符串，DOM 元素， 或者 jQuery 对象的函数，插在每个匹配元素的后面。接收元素在集合中的索引位置作为参数。在函数中this指向元素集合中的当前元素。

 

.after()和.insertAfter()实现同样的功能。主要的不同是语法——特别是内容和目标的位置。 对于 .after(), 选择表达式在函数的前面，参数是将要插入的内容。 对于.insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面。

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

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

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

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

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

 

在所有的段落后插入一些HTML。

<script>$("p").after("<b>Hello</b>");</script>

在所有的段落后插入一个DOM元素。

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

在所有段落后插入一个jQuery对象。

<script>$("p").after( $("b") );</script>