成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

全面理解appendChild方法

孫吉亮 / 1665人閱讀

摘要：示例代碼在內(nèi)容末尾插入節(jié)點(diǎn)運(yùn)行前運(yùn)行后如果要插入的節(jié)點(diǎn)已經(jīng)在文檔中則先剪切再插入。運(yùn)行前運(yùn)行后如果的參數(shù)是一個(gè)節(jié)點(diǎn)對(duì)象，則插入的標(biāo)簽的內(nèi)容會(huì)正常運(yùn)行。運(yùn)行前運(yùn)行后更多本知識(shí)塊的和源文件在上，點(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)在文檔中則先剪切再插入。

語(yǔ)法：node.appendChild()

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

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

屬性描述

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

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

如果appendChild的參數(shù)是一個(gè)script節(jié)點(diǎn)對(duì)象，則插入的script標(biāo)簽的內(nèi)容會(huì)正常運(yùn)行。但只有第一次插入才會(huì)運(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ù)是一個(gè)script節(jié)點(diǎn)對(duì)象，則插入的script標(biāo)簽的內(nèi)容會(huì)正常運(yùn)行。但只有第一次插入才會(huì)運(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)中，過(guò)程和插入文檔中是一樣的。

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

本知識(shí)塊的markdown和demo源文件在github上，點(diǎn)擊這里查看

參考資料

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80980.html

相關(guān)文章

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

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

    2bdenny 評(píng)論0 收藏0

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

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

    notebin 評(píng)論0 收藏0

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

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

    hightopo 評(píng)論0 收藏0

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

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

    Cheriselalala 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<