Element: insertAdjacentText() 方法

語法

insertAdjacentText(where, data)

引數

其中

一個表示相對於呼叫該方法的元素的位置的字串；必須是以下字串之一：

• 'beforebegin'：在 element 本身之前。
• 'afterbegin'：緊貼在 element 內部，在其第一個子節點之前。
• 'beforeend'：緊貼在 element 內部，在其最後一個子節點之後。
• 'afterend'：在 element 本身之後。

data

一個用於建立新文字節點的字串，該節點將相對於呼叫該方法的元素插入到給定的 where 位置。

返回值

無（undefined）。

異常

SyntaxError DOMException

如果 where 的值不被識別，則會丟擲異常。

位置名稱的視覺化

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

示例

beforeBtn.addEventListener("click", () => {
  para.insertAdjacentText("afterbegin", textInput.value);
});

afterBtn.addEventListener("click", () => {
  para.insertAdjacentText("beforeend", textInput.value);
});

請檢視我們 GitHub 上的 insertAdjacentText.html 演示（也可以檢視 原始碼）。這裡有一個簡單的段落。您可以在表單元素中輸入一些文字，然後按“在...之前插入”和“在...之後插入”按鈕，使用 insertAdjacentText() 將其插入到現有段落文字之前或之後。請注意，現有的文字節點不會被修改——而是會建立包含新新增內容的額外文字節點。

規範

瀏覽器相容性

另見

• Element.insertAdjacentElement()
• Element.insertAdjacentHTML()