prepend¶

Module¶

node

Methods¶

NodeList.prepend()¶

NodeList prepend ( content )

将参数内容插入到当前节点列表中的每个元素的开头.

Parameters:	content (HTMLElement\|string\|NodeList) – 将要插入的内容
Return type:	NodeList

该方法插入指定内容到当前节点列表的第一个元素前面(如果要插入到最后一个元素后面, 请用 append() ).

Note

该方法和 prependTo() 功能一样. 最大的区别在于语法不同以及参数意义不同. 当使用 prepend 方法时, 当前节点列表为参数内容的插入容器. 而对于 prependTo 当前节点列表则为要插入的元素, 而参数则为目标容器.

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

你可以创建 NodeList 并把它立即插入到指定容器中:

KISSY.use("node",function(S,NodeList){
    NodeList.all('.inner').prepend('<p>Test</p>');
});

内层的每个 div 元素都得到了新内容

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

你可以把页面上已有的元素 prepend 到另外一个:

KISSY.use("node",function(S,NodeList){
    NodeList.all('.container').prepend($('h2'));
});

如果当前节点列表只包括一个节点, 那么他将会被移到目标容器中(而不是克隆):

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

但是如果当前节点列表包括多余一个节点, 则除了第一个节点外, 其他节点都添加的是参数节点的克隆节点.

Demo¶

在所有段落中添加一些 html 字符串

    <!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>
    <script>
        KISSY.use("node",function(S,NodeList){
            NodeList.all("p").prepend("<strong>Hello</strong>");
        });        
    </script>
    
    </body>
    </html>  

给所有段落添加一个文本节点

    <!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> is I would like to say </p>
      <p> is also I would like to say</p>
    <script>
        KISSY.use("node",function(S,NodeList){
            NodeList.all("p").prepend(document.createTextNode("Hello"));
        });        
    </script>
    
    </body>
    </html>  

给所有段落添加一个 ``NodeList`` 对象

    <!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> is I would like to say </p> <strong>Hello world!!!</strong>

    <script>
        KISSY.use("node",function(S,NodeList){
            NodeList.all("p").prepend(NodeList.all("strong"));
        });        
    </script>
    
    </body>
    </html>  

Navigation

prepend¶

Module¶

Methods¶

Demo¶