JavaScript Element insertAdjacentText() Method

What You’ll Learn

Element.insertAdjacentText() is an instance method that inserts a plain text node at one of four positions: beforebegin, afterbegin, beforeend, and afterend. Learn the MDN demo pattern, comparison with insertAdjacentHTML(), safe user-input handling, and five try-it labs aligned with MDN.

Introduction

When you need to add words to the page — a username, a timestamp, or a chat message — you usually want plain text, not HTML markup. insertAdjacentText(where, data) creates a Text node from your string and places it at a precise position relative to an element.

MDN: given a relative position and a string, the method inserts a new text node at the given position relative to the element it is called from. The string is not parsed as HTML.

This page is part of JavaScript Element. See also insertAdjacentHTML() for parsed markup snippets.

Understanding the insertAdjacentText() Method

Calling target.insertAdjacentText(where, data) inserts a text node relative to target.

• It is an instance method on Element.
• First argument where: position string (MDN).
• Second argument data: plain string for the new text node (MDN).
• Returns undefined (MDN).
• Does not parse HTML tags in data — they appear as literal text.
• Creates a new text node; does not modify existing text nodes (MDN demo).
• Same four positions as insertAdjacentHTML() and insertAdjacentElement().

📝 Syntax

General form of Element.insertAdjacentText (MDN):

insertAdjacentText(where, data)

Parameters

where — One of "beforebegin", "afterbegin", "beforeend", or "afterend" (MDN).

data — A string from which to create a new text node (MDN).

Return value

None (undefined) (MDN).

Position diagram (MDN)

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

Common patterns

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

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

// Safe user comment
box.insertAdjacentText("beforeend", userComment);

// Label before an input
field.insertAdjacentText("beforebegin", "Email: ");

Examples Gallery

Examples follow MDN Element.insertAdjacentText() patterns. Use View Output or Try It Yourself for each case.

const para = document.getElementById("para");
const text = document.getElementById("textInput").value;

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

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

text nodes added inside paragraph

const label = document.getElementById("label");

label.insertAdjacentText("afterbegin", "Note: ");
console.log(label.textContent); // "Note: Original label"

Note: Original label

const thread = document.getElementById("thread");
const comment = getUserInput(); // plain text

thread.insertAdjacentText("beforeend", comment);
console.log("comment added");

comment added

const email = document.getElementById("email");

email.insertAdjacentText("beforebegin", "Email: ");
console.log(email.previousSibling.textContent); // "Email: "

Email: 

const box = document.getElementById("box");
const raw = "<strong>bold</strong>";

box.insertAdjacentText("beforeend", raw);
console.log(box.textContent);
// "<strong>bold</strong>" shown literally

// insertAdjacentHTML would create a <strong> element instead

<strong>bold</strong>

🚀 Common Use Cases

• Adding user comments safely without HTML parsing (MDN).
• Prefixing labels with afterbegin or beforebegin.
• Appending timestamps or status text with beforeend.
• Building chat UIs where messages are plain text.
• Inserting counters or separators next to elements.
• Avoiding XSS when displaying untrusted strings as text.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, April 2018).
• Returns undefined (MDN).
• Does not parse HTML in data — angle brackets appear as literal text.
• MDN: safe choice for user-provided plain text vs insertAdjacentHTML().
• beforebegin / afterend require an element parent in the tree (MDN).
• Related: insertAdjacentHTML(), insertAdjacentElement(), append(), JavaScript hub.

💡 Best Practices