easy

DocsVersion : 1.0.0

append( content, [ args... ] )

原型方法Define in : node.js

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

参数
  • 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' ).append( '<span>span1</span>' );

运行

例子2

将 span 元素追加到 a 元素内部的末尾处,参数是 DOM 元素。

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

运行

例子3

将 span 元素追加到 a 元素内部的末尾处,参数是 easyJS Object。

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

运行

例子4

将 list1 中的 dd 元素追加到 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' ).append( E.query('#demoList1 dd') );

运行

例子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' ).append( E.query('#demoSpan3'), E.query('#demoEm1'), E.query( '#demoLink3' ) );

运行

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