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

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

在之前的文章中,我們研究瞭如何使用 vanilla JavaScript 創建元素並將其插入到 DOM 中的另一個元素之前。

在這篇快速文章中,您將了解之後插入元素的不同方法 另一個在 DOM 中的 JavaScript。

insertBefore() 方法,我們之前學過添加元素之前,也可以用來在 HTML 節點之後插入元素。為此,我們需要使用元素的 nextSibling 返回對同一樹級別的直接節點的引用的屬性。

這是一個例子:

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

// add text
elem.innerText = 'I am a software engineer.';

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

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

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

如果你想插入一個 HTML 字符串 在 DOM 中的某個元素之後,使用 insertAdjacentHTML() 相反,如下所示:

// insert HTML string after target element
target.insertAdjacentHTML('afterend', '<p>I am a software engineer.</p>');

insertAdjacentHTML() 方法自動將給定的字符串解析為 HTML,並將生成的元素插入到給定位置的 DOM 樹中。請查看本指南以了解更多信息。

ES6 after() 方法

ES6 引入了一個名為 after() 的新方法 在 DOM 中的現有節點之後插入一個元素。只需在要插入元素的元素上調用此方法,並將新元素作為參數傳遞:

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

就像 before() 方法,after() 僅適用於現代瀏覽器,特別是 Chrome、Safari、Firefox 和 Opera。目前,Internet Explorer 不支持此方法。但是,您可以使用 polyfill 將支持提高到 IE 9 或更高版本。

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


Tutorial JavaScript 教程
  1. 掌握 JavaScript 的難點:回調 I

  2. Markdown 中的表情符號?

  3. 星期五前端:香草是強大的版本

  4. CSS 佈局居中技巧

  5. React 簡單的響應式菜單鉤子

  6. 將字符串重新排列為回文

  7. 在 JavaScript 中,如何獲取頁面中具有給定名稱的所有單選按鈕?

  1. 使用 Remix 創建 PWA 💿

  2. 從類組件遷移到 React 鉤子

  3. Observables 的 RegExp 語法:從未如此簡單!

  4. 從 NodeJS 連接到 OracleDB?

  5. 10 個可打印的 API 項目

  6. 一種實用的 Web 開發方法。

  7. 將網站轉換為 API:使用 AWS 雲開發工具包構建無服務器 Web Scraper

  1. 了解 CSS 媒體查詢

  2. 2022年如何做電子商務網站【附源碼】

  3. 實用的 JavaScript 可訪問性

  4. 9. 消息隊列和事件循環