JavaScript >> Javascript 文檔 >  >> Tags >> DOM

使用 JavaScript 在另一個 DOM 元素之前插入一個元素

在原生 JavaScript 中,您可以使用 insertBefore() 在 DOM 中的另一個 HTML 元素之前插入一個元素的方法。此方法在文檔中的現有元素之前添加一個元素。

假設我們有以下現有的 <p> 元素:

<p id="intro">Hey, I am John!</p>

我們的目標是添加另一個 <p> 在 DOM 中的上述元素之前標記。這是一個創建新段落標記然後將其插入 before 的示例 以上<p> 標籤:

// create new element
const elem = document.createElement('p');

// add text
elem.innerText = 'Personal Details';

// grab target element reference
const target = document.querySelector('#intro');

// insert the element before target element
target.parentNode.insertBefore(elem, target);

insertBefore() 所有現代和舊瀏覽器都支持該方法,包括 Internet Explorer 6 及更高版本。

如果你想插入一個 HTML 字符串 在 DOM 中的元素之前,您應該使用 insertAdjacentHTML() 代替方法。此方法將指定的字符串解析為 HTML,並將生成的元素插入到 DOM 樹中的指定位置。這是一個例子:

// insert HTML string before target element
target.insertAdjacentHTML('beforebegin', '<p>Personal Details</p>');

查看此 MDN 指南以了解有關 insertAdjacentHTML() 的更多信息 方法。

ES6 before() 方法

insertBefore() 方法非常適合在 DOM 中的另一個元素之前添加一個新元素。但是,您需要在 parentNode 上調用它 目標元素。

幸運的是,ES6 引入了一個名為 before() 的新方法 在另一個 DOM 元素之前插入一個元素。你調用 before() 直接在目標節點上調用方法,並將新元素作為參數傳入,如下所示:

// insert the element before target element
target.before(elem);

就是這樣。 before() 只有 受最新版本的 Chrome、Safari、Firefox 和 Opera 支持,並且在 Internet Explorer 中不起作用。但是,您可以使用 polyfill 將支持擴展到 IE 9 及更高版本。

閱讀下一篇: 如何在 JavaScript 中向 DOM 中插入元素


Tutorial JavaScript 教程
  1. 使用 Vercel 即時部署 Web 應用程序

  2. JavaScript 中的類型、值和變量

  3. TypeScript 的優缺點

  4. 使用 Selenium 和 PhantomJS 進行無頭功能測試

  5. phantomjs:找不到命令

  6. 如何解碼 nock 記錄的響應

  7. 在從 ajax 頁面調用頁面上觸發事件的最佳實踐

  1. 佔位符文本在 Safari 中未垂直居中

  2. 輔助項目 #2 - Oyego

  3. 關閉後如何清除模態中的反應狀態?

  4. Javascript textarea 撤消重做

  5. 自定義 React Hook - useObjectState

  6. 如何製作動態、動畫和響應式畫布元素

  7. 我如何使用 Chevrotain、Typescript 和 Webpack 構建自己的簡化 React

  1. URL 驗證正則表達式 JavaScript |示例代碼

  2. WordPress POST 請求

  3. Material-ui v4 在 html DOM 類屬性中顯示組件名稱?

  4. 為開發人員準備的 35 個網站備忘單