全面理解appendChild方法

孫吉亮發布于2019-08-20 12:26 / 1616人閱讀

摘要：示例代碼在內容末尾插入節點運行前運行后如果要插入的節點已經在文檔中則先剪切再插入。運行前運行后如果的參數是一個節點對象，則插入的標簽的內容會正常運行。運行前運行后更多本知識塊的和源文件在上，點擊這里查看參考資料和有什么區別

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
}

注意事項

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

示例代碼

在內容末尾插入節點

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



wrap



wrap
    jszhou

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

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

wrap.appendChild(outer);



outer
wrap



wrap
    outer

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

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

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



wrap



wrap
    
    jszhou

把文檔片段節點插入文檔中是先剪切文檔片段節點的所有子節點然后再一起插入文檔中。文檔片段節點也可以插入文檔片段節點中，過程和插入文檔中是一樣的。

// 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








    head
    content

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

參考資料

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

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

element.innerHTML和appendChild有什么區別

GPU云服務器云服務器全面理解 appendChild 全面分析全面變革

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80980.html

前端應該知道的基本知識

摘要：所有我們不熟悉或者沒有掌握的知識皆可稱之為知識盲區，有知識盲區并不可怕，針對知識盲區去學習即可。只有這樣，我們才會準確知道自己的知識盲區所處何處，以及發現更多的知識盲區。節點對應的對象是，其他的具體節點對象全都是繼承自對象。前端時間在部門內進行分享，準備素材時偶然發現下面的一個現象，因為和當時分享的主題無關，就先記下來了，事后重新審視，并把一些思考記錄如下：一、問題 HTML： ...

2bdenny 2019-08-26 12:20 評論0 收藏0
一次排查頁面重復請求的經歷

摘要：前段時間重構一個頁面，頁面中存在通過第三方代碼插入的動態廣告正常的產品需求，上線后發現第三方的廣告資源存在重復請求的問題。所以，同一個請求會觸發兩次的原因頁面加載時渲染元素會觸發第一次請求，執行代碼導致重新渲染觸發第二次請求。前段時間重構一個頁面，頁面中存在通過第三方JavaScript代碼插入的動態廣告（正常的產品需求），上線后發現第三方的廣告資源存在重復請求的問題。由于控制廣告插...

notebin 2019-08-02 11:47 評論0 收藏0
一次排查頁面重復請求的經歷

摘要：前段時間重構一個頁面，頁面中存在通過第三方代碼插入的動態廣告正常的產品需求，上線后發現第三方的廣告資源存在重復請求的問題。所以，同一個請求會觸發兩次的原因頁面加載時渲染元素會觸發第一次請求，執行代碼導致重新渲染觸發第二次請求。前段時間重構一個頁面，頁面中存在通過第三方JavaScript代碼插入的動態廣告（正常的產品需求），上線后發現第三方的廣告資源存在重復請求的問題。由于控制廣告插...

hightopo 2019-08-23 12:30 評論0 收藏0
深入理解JavaScript系列7:S.O.L.I.D五大原則之開閉原則

摘要：前言本章我們要講解的是五大原則語言實現的第篇，開閉原則。該代碼有一個限制，就是如果再增加一個類型的話，那就需要再次修改里的條件語句，這明顯違反了開閉原則。關于本文本文轉自大叔的深入理解系列。前言本章我們要講解的是S.O.L.I.D五大原則JavaScript語言實現的第2篇，開閉原則OCP（The Open/Closed Principle ）。開閉原則的描述是： Softwar...

Cheriselalala 2019-08-19 17:22 評論0 收藏0