全面理解appendChild方法

Node.prototype.appendChild

寫於: 2016-11-19 | 更新於: 2017-1-3

W3C 標準

WHATWG: appendChild

定義和用法

節點的appendChild方法用於在內容末尾插入節點，若是要插入的節點已經在文檔中則先剪切再插入。

• 語法：node.appendChild()

• 參數：節點對象（a node object）

• 返回值：插入的節點對象在文檔中的引用

屬性描述

appendChild方法可枚舉可重寫可配置。

// Object.getOwnPropertyDescriptor(Node.prototype, 'appendChild') 的結果以下：
var result = {
    configurable: true,
    enumerable: true,
    writable: true,
    value: Node.prototype.appendChild
}

注意事項

1. 若是appendChild的參數是一個script節點對象，則插入的script標籤的內容會正常運行。但只有第一次插入纔會運行。

示例代碼

在內容末尾插入節點

// appendChild.js
var wrap = document.querySelector('js-wrap'),
    newP = document.createElement('p');
    
newP.textContent = 'jszhou';
wrap.appendChild(newP);

<!-- appendChild.html -->
<!-- 運行前 -->
<div class="js-wrap">wrap</div>
<script src="./appendChild.js"></script>

<!-- 運行後 -->
<div class="js-wrap">wrap
    <p>jszhou</p>
</div>
<script src="./appendChild.js"></script>

若是要插入的節點已經在文檔中則先剪切再插入。

// cut.js
var $ = document.querySelector.bind(document),
    outer = $('.js-outer'),
    wrap = $('.js-wrap');

wrap.appendChild(outer);

<!-- cut.html -->
<!-- 運行前 -->
<div class="js-outer">outer</div>
<div class="js-wrap">wrap</div>
<script src="./cut.js"></script>

<!-- 運行後 -->
<div class="js-wrap">wrap
    <div class="js-outer">outer</div>
</div>
<script src="./cut.js"></script>

若是appendChild的參數是一個script節點對象，則插入的script標籤的內容會正常運行。但只有第一次插入纔會運行。

// appendScript.js
var wrap = document.querySelector('.js-wrap'),
    newScript = document.createElement('script');

newScript.innerHTML = 'wrap.append("jszhou")';
wrap.appendChild(newScript);

<!-- appendScript.html -->
<!-- 運行前 -->
<div class="js-wrap">wrap</div>
<script src="./appendScript.js"></script>

<!-- 運行後 -->
<div class="js-wrap">wrap
    <script>wrap.append("jszhou")</script>
    jszhou
</div>
<script src="./appendScript.js"></script>

把文檔片斷節點插入文檔中是先剪切文檔片斷節點的全部子節點而後再一塊兒插入文檔中。文檔片斷節點也能夠插入文檔片斷節點中，過程和插入文檔中是同樣的。

// documentFragment.js
var wrap = document.querySelector('.js-wrap'),
    docFragWrap = document.createDocumentFragment(),
    docFrag = document.createDocumentFragment(),
    h2 = document.createElement('h2'),
    p = document.createElement('p');

h2.textContent = 'head';
docFragWrap.appendChild(h2);

p.textContent = 'content';
docFrag.appendChild(p);

docFragWrap.appendChild(docFrag);
console.log(docFrag.childNodes.length); // 0

wrap.appendChild(docFragWrap);
console.log(docFragWrap.childNodes.length); // 0

<!--documentFragment.html-->
<!--運行前-->
<div class="js-wrap"></div>
<script src="./documentFragment.js"></script>

<!--運行後-->
<div class="js-wrap">
    <h2>head</h2>
    <p>content</p>
</div>
<script src="./documentFragment.js"></script>

更多

本知識塊的markdown和demo源文件在github上，點擊這裏查看

參考資料

1. https://developer.mozilla.org...

2. http://www.w3schools.com/jsre...

3. element.innerHTML和appendChild有什麼區別