• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • after()

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

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

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

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

    请看下面的HTML:

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

    我们可以创建内容然后同时插在好几个元素后面:

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

    每个内部的<div>元素得到新的内容:

    <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>
    

    如果有多个目标元素,内容将被复制然后被插入到每个目标后面。

    Inserting Disconnected DOM nodes(插入分离的DOM节点)

    对于jQuery 1.4,.before().after()同时也会对分离的DOM元素有效。例如,下面的代码:

    $('<div/>').after('<p></p>');
    

    结果是一个包含一个div和一个段落的JQuery集合。因此,我们可以更进一步操作这个集合,即使在将它插入document之前。

    $('<div/>').after('<p></p>').addClass('foo')
      .filter('p').attr('id', 'bar').html('hello')
    .end()
    .appendTo('body');
    

    结果是下面的代码被插到</body>标签之前:

    <div class="foo"></div>
    <p class="foo" id="bar">hello</p>
    

    Passing a Function(传递一个函数)

    从jQuery 1.4开始,.after()允许我们传入一个函数,该函数返回要被插入的元素。

    $('p').after(function() {
      return '<div>' + this.className + '</div>';
    });
    

    上面的代码在每个段落后插入一个<div><div>里面是该段落的class名称。

    Additional Arguments(额外的参数)

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

    例如,下面将插入两个新的<div<和现有的<div<到第一个段落后面:

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

    .after()可以接受任何数量的额外的参数,所以上面的例子中,也可以将三个独立的<div>分别作为参数传给该方法,就像这样$('p').first().after($newdiv1, newdiv2, existingdiv1)。参数的类型和数量,将在很大程度上取决于你是如何选择元素的。

    例子

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

    <!DOCTYPE html>
    <html>
    <head>
      <style>p { background:yellow; }</style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <p>I would like to say: </p>
    <script>$("p").after("<b>Hello</b>");</script>
     
    </body>
    </html>
    

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

    <!DOCTYPE html>
    <html>
    <head>
      <style>p { background:yellow; }</style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <p>I would like to say: </p>
    <script>$("p").after( document.createTextNode("Hello") );</script>
     
    </body>
    </html>
    

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

    <!DOCTYPE html>
    <html>
    <head>
      <style>p { background:yellow; }</style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <b>Hello</b><p>I would like to say: </p>
    <script>$("p").after( $("b") );</script>
     
    </body>
    </html>
    

    下篇:insertBefore()