這種將HTML元素從一個(gè)地方“復(fù)制”到另一個(gè)地方的方法是對(duì)瀏覽器功能的錯(cuò)誤理解的結(jié)果。瀏覽器不會(huì)將HTML文檔保存在內(nèi)存中的某個(gè)位置，而是會(huì)根據(jù)來(lái)自JavaScript的命令反復(fù)修改HTML。
當(dāng)瀏覽器首次加載頁(yè)面時(shí)，它將解析 HTML文檔并將其轉(zhuǎn)換為DOM結(jié)構(gòu)。這是遵循W3C標(biāo)準(zhǔn)的對(duì)象之間的關(guān)系（嗯，主要是...）。從那時(shí)起，原始的HTML是完全多余的。瀏覽器不在乎原始的HTML結(jié)構(gòu)是什么。它對(duì)網(wǎng)頁(yè)的理解是從中創(chuàng)建的DOM結(jié)構(gòu)。如果您的HTML標(biāo)記不正確/無(wú)效，則網(wǎng)絡(luò)瀏覽器會(huì)通過(guò)某種方式對(duì)其進(jìn)行更正；DOM結(jié)構(gòu)不會(huì)以任何方式包含無(wú)效代碼。
基本上，HTML應(yīng)該被視為對(duì)DOM結(jié)構(gòu)進(jìn)行序列化的一種方式，以使其可以通過(guò)Internet傳遞或存儲(chǔ)在本地文件中。
因此，不應(yīng)將其用于修改現(xiàn)有網(wǎng)頁(yè)。DOM（文檔對(duì)象模型）具有用于更改頁(yè)面內(nèi)容的系統(tǒng)。這是基于節(jié)點(diǎn)的關(guān)系，而不是基于HTML序列化。因此，當(dāng)你添加一個(gè)li到ul，你有這兩個(gè)選項(xiàng)（假設(shè)ul是列表元素）：
// option 1: innerHTML
ul.innerHTML += '<li>foobar</li>';
// option 2: DOM manipulation
var li = document.createElement('li');
li.appendChild(document.createTextNode('foobar'));
ul.appendChild(li);
現(xiàn)在，第一個(gè)選項(xiàng)看起來(lái)簡(jiǎn)單很多，但這只是因?yàn)闉g覽器為您提供了很多抽象的東西：在內(nèi)部，瀏覽器必須將元素的子代轉(zhuǎn)換為字符串，然后附加一些內(nèi)容，然后將字符串轉(zhuǎn)換回DOM結(jié)構(gòu)。第二個(gè)選項(xiàng)對(duì)應(yīng)于瀏覽器對(duì)正在發(fā)生的事情的本機(jī)理解。
第二個(gè)主要考慮因素是考慮HTML的局限性。考慮網(wǎng)頁(yè)時(shí)，并非與元素相關(guān)的所有內(nèi)容都可以序列化為HTML。例如，與綁定的事件處理程序x.onclick = function();或x.addEventListener(...)不會(huì)在中復(fù)制的事件處理程序innerHTML，因此不會(huì)在它們之間進(jìn)行復(fù)制。因此，其中的新元素y將沒(méi)有事件偵聽(tīng)器。這可能不是您想要的。
因此，解決此問(wèn)題的方法是使用本機(jī)DOM方法：
for (var i = 0; i < x.childNodes.length; i++) {
y.appendChild(x.childNodes[i].cloneNode(true));
}
閱讀MDN文檔可能會(huì)有助于理解這種處理方式：
appendChild
cloneNode
childNodes
現(xiàn)在，此問(wèn)題（如上面的代碼示例中的選項(xiàng)2一樣）的問(wèn)題是，它非常冗長(zhǎng)，比該innerHTML選項(xiàng)要長(zhǎng)得多。當(dāng)您欣賞擁有一個(gè)為您執(zhí)行此類操作的JavaScript庫(kù)時(shí)。例如，在jQuery中：
$('#y').html($('#x').clone(true, true).contents());
這對(duì)您想要發(fā)生的事情更為明確。例如，除了具有各種性能優(yōu)勢(shì)和保留事件處理程序外，它還可以幫助您了解代碼在做什么。這對(duì)于您作為JavaScript程序員的靈魂來(lái)說(shuō)是一件好事，并且使異常錯(cuò)誤的可能性大大降低！
