當(dāng)我們在開發(fā)網(wǎng)頁時(shí)，有時(shí)候需要把一個(gè)已有的元素復(fù)制并插入到另一個(gè)地方。這時(shí)候我們就需要使用克隆節(jié)點(diǎn)。克隆節(jié)點(diǎn)即是將一個(gè)元素的內(nèi)容、屬性、樣式等全部復(fù)制，并生成一個(gè)全新的元素。Javascript提供了多種克隆節(jié)點(diǎn)的方法，我們可以根據(jù)實(shí)際場景選擇不同的方法。

首先來看最簡單的一種克隆節(jié)點(diǎn)的方式：cloneNode方法。該方法可以克隆一個(gè)節(jié)點(diǎn)，并將它作為返回值返回。調(diào)用cloneNode方法時(shí)可以傳入一個(gè)參數(shù)，該參數(shù)為布爾類型，表示是否要同時(shí)克隆該節(jié)點(diǎn)的后代節(jié)點(diǎn)。如果傳入true則會(huì)對該節(jié)點(diǎn)的后代節(jié)點(diǎn)進(jìn)行深拷貝，將它們?nèi)繌?fù)制，否則只會(huì)復(fù)制該節(jié)點(diǎn)本身。下面是一個(gè)示例：

const originNode = document.querySelector('#origin');
const clonedNode = originNode.cloneNode(true);
document.querySelector('#container').appendChild(clonedNode);

運(yùn)行上述代碼后，我們會(huì)發(fā)現(xiàn)#origin元素被復(fù)制到了#container元素內(nèi)。需要注意的是，cloneNode方法只會(huì)復(fù)制該節(jié)點(diǎn)的內(nèi)容和樣式，并不會(huì)復(fù)制事件屬性。如果需要克隆事件屬性，我們可以使用addEventListener()方法來實(shí)現(xiàn)：

const originNode = document.querySelector('#origin');
const clonedNode = originNode.cloneNode(true);
clonedNode.addEventListener('click', function(){console.log('clicked!')});
document.querySelector('#container').appendChild(clonedNode);

現(xiàn)在#cloned就可以響應(yīng)點(diǎn)擊事件，輸出clicked!。

除上述方式之外，還可以利用innerHTML來實(shí)現(xiàn)克隆節(jié)點(diǎn)。這種方法比較容易理解，只要將需要克隆的節(jié)點(diǎn)的innerHTML直接賦值給要插入的節(jié)點(diǎn)即可。注意需要首先創(chuàng)建一個(gè)新的節(jié)點(diǎn)，并在新節(jié)點(diǎn)中插入克隆的HTML：

const originNode = document.querySelector('#origin');
const clonedNode = document.createElement('div');
clonedNode.innerHTML = originNode.innerHTML;
document.querySelector('#container').appendChild(clonedNode);

這種方式雖然簡單易用，但是會(huì)存在一定的安全問題。容易被攻擊者利用innerHTML注入一些惡意代碼。建議只有在開發(fā)過程中使用，不要在生產(chǎn)環(huán)境中使用。

最后介紹一種比較實(shí)用的克隆節(jié)點(diǎn)方式：利用模板元素。模板元素是HTML5中新增的標(biāo)簽，我們可以通過它來快速復(fù)制節(jié)點(diǎn)，且不用擔(dān)心安全性問題。模板元素只需要使用content屬性獲取內(nèi)容，即可獲取模板的所有節(jié)點(diǎn)。下面是一個(gè)示例：

const originNode = document.querySelector('#origin');
const temp = document.createElement('template');
temp.content.appendChild(originNode.cloneNode(true));
document.querySelector('#container').appendChild(temp.content.firstChild);

通過模板元素的方式，我們既可以避免innerHTML的安全問題，又可以復(fù)制整個(gè)結(jié)構(gòu)，非常實(shí)用。