after

Module

Methods

NodeList.after()
NodeList after ( content )
将参数内容插入到当前列表中每个元素之后.
Parameters:content (HTMLElement|string|NodeList) –

将要插入的元素

  • string : html 字符串
  • HTMLElement|NodeList : 已有或新建的元素

insertAfter() 和该方法的功能一样, 只不过参数意义不同, insertAfter 表示当前节点列表被插入到参数目标节点之后, 而该方法则表示参数节点被插入到当前节点之后.

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

我们可以创建节点并立即把它插入到一些元素之前

NodeList.all('.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>

我们也可以操纵现有元素

NodeList.all('.container').after(NodeList.all('h2'));

如果目标节点只有一个, 那么当前节点就会移动到目标节点之后

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

如果有多个目标节点, 那么除了第一个目标节点外, 其他目标节点前会被插入当前节点的克隆

Demo

把段落插入到 div 节点之前

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; }
</style>
 <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>

<p>I would like to say: </p>  <div id="foo">FOO!</div>

<script>
    KISSY.use("node",function(S,NodeList){
        NodeList.all("#foo").after(NodeList.all("p"));
    });        
</script>

</body>
</html>