溫馨提示×

DOM節(jié)點深度克隆函數(shù)cloneNode()用法實例

dom
小云
131
2023-08-17 13:26:40
欄目: 編程語言

cloneNode()是一個DOM節(jié)點的方法,用于創(chuàng)建該節(jié)點的一個副本。這個副本是完全獨立的,不會與原始節(jié)點有任何關(guān)聯(lián)。

下面是一個使用cloneNode()方法的示例:

<!DOCTYPE html>

<html>

<head>

  <title>Clone Node Example</title>

</head>

<body>

  <div id="original">Original Node</div>

  <script>

    // 獲取原始節(jié)點

    const originalNode = document.getElementById('original');

    // 克隆原始節(jié)點

    const clonedNode = originalNode.cloneNode(true);

    // 修改克隆節(jié)點的內(nèi)容

    clonedNode.innerHTML = 'Cloned Node';

    // 將克隆節(jié)點添加到文檔中

    document.body.appendChild(clonedNode);

  </script>

</body>

</html>

在上述示例中,我們先通過getElementById()方法找到了一個具有id為"original"的<div>元素。然后,我們使用cloneNode(true)方法對這個節(jié)點進行深度克隆,將其包括子節(jié)點一同復(fù)制。接下來,我們修改了克隆節(jié)點的內(nèi)容,并使用appendChild()方法將克隆節(jié)點添加到文檔中。

最終的結(jié)果是在頁面上顯示兩個相同內(nèi)容的<div>元素,一個是原始節(jié)點,另一個是克隆節(jié)點。請注意,這兩個節(jié)點雖然內(nèi)容相同,但它們是彼此獨立的。任何對克隆節(jié)點的改動都不會影響原始節(jié)點。

0