easy

DocsVersion : 1.0.0

prepend( content, [ args... ] )

原型方法Define in : node.js

向每个匹配元素内部的起始位置处( 第一个子元素前,含文本节点 )的前面插入内容,该方法同原生方法 insertBefore 原理一致。如果要向匹配元素内部的末尾处追加内容,请使用 append

参数
  • content
    htmlString|
    Element|
    Element Array|
    easyJS Object
    必需

    content 可以是 HTML 字符串、DOM 元素、DOM 元素数组、easyJS Object。

  • args...
    htmlString|
    Element|
    Element Array|
    easyJS Object
    可选

    也可以同时插入多个内容,多个内容同时插入将按照参数本身的顺序依次插入。

返回值
  • easyJS Object

    返回 easyJS Object 便于链式调用。

例子1

在 div 元素内部起始位置前插入一个 span 元素,参数是HTML字符串。

box1
<div id="box1">box1</div>
E( '#box1' ).prepend( '<span>span1</span>' );

运行

例子2

将 span 元素插入到 a 元素内部起始位置的前面,参数是 DOM 元素。

span link
<span id="demoSpan1">span </span><a href="#" id="demoLink1">link </a>
E( '#demoLink1' ).prepend( E.query('#demoSpan1')[0] );

运行

例子3

将 span 元素插入到 a 元素内部起始位置的前面,参数是 easyJS Object。

span link
<span id="demoSpan2">span </span><a href="#" id="demoLink2">link </a>
E( '#demoLink2' ).prepend( E('#demoSpan2') );

运行

例子4

将 list1 中的 dt 元素插入到 list2 内部起始位置的前面,参数是 DOM 元素数组。

list1
dd1
dd2
list2
dd3
dd4
<dl id="demoList1">
    <dt>list1</dt>
    <dd>dd1</dd>
    <dd>dd2</dd>
</dl>
<dl id="demoList2">
    <dt>list2</dt>
    <dd>dd3</dd>
    <dd>dd4</dd>
</dl>
E( '#demoList2' ).prepend( E.query('#demoList1 dt') );

运行

例子5

将 span、em、a 一次性插入到 div 的起始位置的前面,多个参数同时插入。

span em link
box2
<span id="demoSpan3">span </span><em id="demoEm1">em </em><a href="#" id="demoLink3">link </a>
<div id="box2">box2 </div>
E( '#box2' ).prepend( E.query('#demoSpan3'), E.query('#demoEm1'), E.query( '#demoLink3' ) );

运行

查看其它 DOM 元素的插入方法
afterprototype
afterToprototype
appendprototype
appendToprototype
beforeprototype
beforeToprototype
prependToprototype