JavaScript >> Javascript 文檔 >  >> JavaScript

如何使用 JavaScript 克隆元素

要在 JavaScript 中克隆 DOM 元素,可以使用元素的 cloneNode() 方法。此方法創建節點的副本並返回克隆。

這是一個例子:

const target = document.querySelector('#intro');

const cloned = target.cloneNode();

默認情況下,cloneNode 方法只克隆目標元素的屬性及其值。

如果您還想深度克隆所有子元素,只需傳遞 truecloneNode() 方法如下圖:

const cloned = target.cloneNode(true);

要將克隆的節點插入到文檔中,可以使用 appendChild()isnertBefore() 方法:

// insert element as last child
document.body.appendChild(cloned);

// insert element before another node
target.parentNode.insertBefore(cloned, target);

Tutorial JavaScript 教程
  1. 用 Enzyme 和 Jest 測試 React:一個新的視頻課程

  2. 使用 Vite、React Stripe 和 Payment Element 接受付款

  3. 我 15 歲,用 React JS 做了一個😴睡前計算器

  4. 我在 2021 年學到的三 (3) 節 NodeJS 課程

  5. 掌握 JavaScript 的難點:Prototype &Class III

  6. 從頭開始創建 Netflix 克隆:JavaScript PHP + MySQL 第 10 天

  7. 今天得到了我的第 10 個贊助商,一個受我的 dev.to 文章啟發的副項目

  1. Foal 2.10 版已發布!

  2. 如果我通過 API 調用添加電子郵件,如何擺脫以太網 Outlook 中的尖括號?

  3. 加速 API 的緩存策略

  4. 僅基於非空數組的字段匹配

  5. 提示 #5 - 審核您的項目是否存在開源依賴項中的漏洞

  6. 在 React 中使用 SVG 圖標的正確方法

  7. 介紹二十十九前沿主題

  1. 5 個有用的 React 庫⚛️ Part-2

  2. 在沒有 jQuery 的情況下以 Angular 方式處理 DOM 事件

  3. 使用 Angular + AngularFire 進行用戶身份驗證

  4. 使用 tailwindcss、twin.macro 和 goober 創建自定義 CRA(create-react-app)模板