在 JavaScript 中新增元素

1. 在 JavaScript 中使用 prepend() 方法新增元素
2. 在 JavaScript 中使用 insertBefore() 方法新增元素
3. 在 JavaScript 中使用 insertAdjacentElement() 方法新增元素
4. 在 JavaScript 中使用 before() 方法新增元素

本文介紹瞭如何在 JavaScript 中新增元素。Prepend 表示在指定元素的開頭插入。

我們可以使用 prepend()、insertBefore()、before() 和 insertAdjacentElement() 方法來做到這一點。讓我們一一學習。

在 JavaScript 中使用 prepend() 方法新增元素

我們可以使用 prepend() 方法在指定元素的開頭插入 DOMString 或 Node 的集合，這意味著我們可以在父元素的直接第一個子元素之前插入。請參閱下面給出的程式碼片段。

HTML 程式碼（此 HTML 在本教程中將是相同的）：

<ul id="languages">
 	<li>Python</li>
</ul>

JavaScript 程式碼：

let parentNode = document.querySelector('#languages');
let li = document.createElement('li');
li.textContent = 'Java';
parentNode.prepend(li);

輸出：

最初，我們的頁面上有一個列表項：Python。我們使用 querySelector() 選擇與特定選擇器匹配的第一個元素並將其儲存在 parentNode 中以新增另一個列表項。

然後，使用 createElement() 建立一個 <li> 元素，並使用 .textContent 屬性將文字內容設定為 Java。

最後，我們使用 prepend() 方法在 Python 之前插入 Java（參見上面的輸出）。我們可以在元素的第一個子元素之前新增多個 <li> 元素嗎？

是的當然。請參閱以下程式碼並觀察輸出。

JavaScript 程式碼：

let parentNode = document.querySelector('#languages');
let languages = ['Java', 'JavaScript', 'TypeScript'];

let nodes = languages.map(lang => {
  let li = document.createElement('li');
  li.textContent = lang;
  return li;
});

parentNode.prepend(...nodes);

輸出：

此示例還選擇與給定選擇器匹配的第一個元素。

此外，我們使用 map() 方法為建立 <li> 元素的 languages 陣列的每個元素呼叫箭頭函式，並使用 .textContent 屬性設定 <li> 與陣列的當前元素。

請記住，map() 方法既不會為空元素呼叫函式，也不會更改實際陣列，即此處的 languages。

最後，我們使用 spread operator (...) 將具有所有列表項的 nodes 傳遞給 prepend() 方法。擴充套件運算子遍歷陣列並將其拆分為單獨的元素。

請記住，prepend() 方法會在父節點的第一個子節點之前立即插入一組節點。讓我們繼續下面的程式碼，使用 JavaScript 預先新增 DOMString。

JavaScript 程式碼：

let parent = document.querySelector('#languages');
parent.prepend('prepending DOMString Demo');
console.log(parent.textContent);

輸出：

你看，DOMString 被插入到元素的第一個子元素（列表項 Python）之前。

通過在控制檯上列印，我們在雙引號中看到列表項 Python 和 DOMString，因為我們在這裡使用 .textContent 屬性返回特定節點及其所有子節點的文字內容。

在 JavaScript 中使用 insertBefore() 方法新增元素

JavaScript 程式碼：

let parentNode = document.querySelector('#languages');
let li = document.createElement('li');
li.textContent = 'Java';
parentNode.insertBefore(li, parentNode.firstChild);

輸出：

在這裡，inserBefore() 方法將要插入的當前元素和父元素的第一個子元素作為引數。然後，它將當前元素插入到父元素的第一個子元素之前（參見上面的輸出）。

在 JavaScript 中使用 insertAdjacentElement() 方法新增元素

JavaScript 程式碼：

let parentNode = document.querySelector('#languages');
let li = document.createElement('li');
li.textContent = 'Java';
parentNode.insertAdjacentElement('afterbegin', li);

輸出：

此示例使用 insertAdjacentElement() 方法在給定位置插入指定元素。

它有四個屬性：beforebegin、afterbegin、beforeend 和 afterend，但我們使用 afterbegin 插入父元素之後但在第一個子元素之前。

請參閱以下內容以視覺化這些屬性如何新增元素。請記住，我們將元素作為其 id 為 languages 的父元素。

<!-- beforebegin -->
<ul id="languages">

    <!-- afterbegin -->

 <li>Python</li>

    <!-- beforeend -->

</ul>
<!-- afterend -->

我們已經看到了如何選擇父元素並在父元素的第一個子元素之前插入一個新元素。讓我們探索如何選擇子元素本身並在其自身之前插入另一個元素。

在 JavaScript 中使用 before() 方法新增元素

JavaScript 程式碼：

let parentNode = document.querySelector('#languages');
let li = document.createElement('li');
li.textContent = 'Java';
parentNode.firstChild.before(li);

輸出：

在這裡，我們使用 before() 方法來新增元素。我們可以在父元素的指定元素之前插入一個 DOMString 或 node 的集合。

在這裡，我們可以選擇任何孩子，但我們專注於在 firstChild 之前插入。你可以在此處找到有關 before() 的更多資訊。