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