成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

全面理解appendChild方法

孫吉亮 / 1734人閱讀

摘要：示例代碼在內(nèi)容末尾插入節(jié)點(diǎn)運(yùn)行前運(yùn)行后如果要插入的節(jié)點(diǎn)已經(jīng)在文檔中則先剪切再插入。運(yùn)行前運(yùn)行后如果的參數(shù)是一個節(jié)點(diǎn)對象，則插入的標(biāo)簽的內(nèi)容會正常運(yùn)行。運(yùn)行前運(yùn)行后更多本知識塊的和源文件在上，點(diǎn)擊這里查看參考資料和有什么區(qū)別

Node.prototype.appendChild 
寫于: 2016-11-19 | 更新于: 2017-1-3
W3C 標(biāo)準(zhǔn)

WHATWG: appendChild

定義和用法

節(jié)點(diǎn)的appendChild方法用于在內(nèi)容末尾插入節(jié)點(diǎn)，如果要插入的節(jié)點(diǎn)已經(jīng)在文檔中則先剪切再插入。

語法：node.appendChild()

參數(shù)：節(jié)點(diǎn)對象（a node object）

返回值：插入的節(jié)點(diǎn)對象在文檔中的引用

屬性描述

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

// Object.getOwnPropertyDescriptor(Node.prototype, "appendChild") 的結(jié)果如下：
var result = {
    configurable: true,
    enumerable: true,
    writable: true,
    value: Node.prototype.appendChild
}
注意事項(xiàng)

如果appendChild的參數(shù)是一個script節(jié)點(diǎn)對象，則插入的script標(biāo)簽的內(nèi)容會正常運(yùn)行。但只有第一次插入才會運(yùn)行。

示例代碼

在內(nèi)容末尾插入節(jié)點(diǎn)

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



wrap





wrap
    
jszhou

如果要插入的節(jié)點(diǎn)已經(jīng)在文檔中則先剪切再插入。

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

wrap.appendChild(outer);



outer


wrap





wrap
    
outer

如果appendChild的參數(shù)是一個script節(jié)點(diǎn)對象，則插入的script標(biāo)簽的內(nèi)容會正常運(yùn)行。但只有第一次插入才會運(yùn)行。

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

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



wrap





wrap
    
    jszhou

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

// 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上，點(diǎn)擊這里查看

參考資料

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

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

element.innerHTML和appendChild有什么區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://hztianpu.com/yun/80980.html

相關(guān)文章

  • 前端應(yīng)該知道的基本知識

    摘要：所有我們不熟悉或者沒有掌握的知識皆可稱之為知識盲區(qū)，有知識盲區(qū)并不可怕，針對知識盲區(qū)去學(xué)習(xí)即可。只有這樣，我們才會準(zhǔn)確知道自己的知識盲區(qū)所處何處，以及發(fā)現(xiàn)更多的知識盲區(qū)。節(jié)點(diǎn)對應(yīng)的對象是，其他的具體節(jié)點(diǎn)對象全都是繼承自對象。 前端時間在部門內(nèi)進(jìn)行分享，準(zhǔn)備素材時偶然發(fā)現(xiàn)下面的一個現(xiàn)象，因?yàn)楹彤?dāng)時分享的主題無關(guān)，就先記下來了，事后重新審視，并把一些思考記錄如下： 一、問題 HTML： ...

    2bdenny 評論0 收藏0

  • 一次排查頁面重復(fù)請求的經(jīng)歷

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

    notebin 評論0 收藏0

  • 一次排查頁面重復(fù)請求的經(jīng)歷

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

    hightopo 評論0 收藏0

  • 深入理解JavaScript系列7:S.O.L.I.D五大原則之開閉原則

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

    Cheriselalala 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<