JavaScript Element insertAdjacentText() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word INSERTADJACENTTEXT

Definition

In JavaScript, the insertAdjacentText() method inserts a new text node at a position relative to the element (MDN). The string is not parsed as HTML.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.insertAdjacentText. Start with this line.

JavaScript
el.insertAdjacentText(where, data)
CallWhat it does
el.insertAdjacentText(where, data)Primary signature.
el.insertAdjacentText(...)Call with the arguments your case needs.

Built into the browser. Call insertAdjacentText(...) on an Element — no import required.

Library declarations
JavaScript
el.insertAdjacentText(where, data)

Parameters

ParameterDescription
whereRequired. string. Relative position (MDN)
dataRequired. string. Text for the new Text node

Return Value

Return ValueDescription
*No useful return value

JavaScript Examples

Example 1 — beforeend

Add plain text as the last child inside the target.

JavaScript
const para = document.getElementById("para"); // Hello

para.insertAdjacentText("beforeend", "!");
console.log(para.textContent);
Try It Yourself

How It Works

  1. Find the target. The element that will get a new text node.
  2. Pass plain text. No HTML parsing (MDN).
  3. Use beforeend. Text becomes the last child inside the element.
  4. Return is undefined. Read the result via textContent.

Example 2 — Tags Stay Literal

Unlike insertAdjacentHTML, angle brackets are not markup.

JavaScript
const box = document.getElementById("box");

box.insertAdjacentText("beforeend", "<b>hi</b>");
console.log(box.textContent);
console.log(box.querySelector("b")); // null — no <b> element
Try It Yourself

How It Works

  1. Pass a string with tags. Looks like HTML, but is not parsed.
  2. A Text node is created. Characters appear as-is on the page.
  3. No element created. querySelector("b") finds nothing.
  4. Safer for user input. Prefer this over insertAdjacentHTML for plain text (MDN).

Example 3 — beforebegin / afterend

Insert text nodes as siblings around the target (needs a parent).

JavaScript
const box = document.getElementById("box");

box.insertAdjacentText("beforebegin", "B");
box.insertAdjacentText("afterend", "A");

console.log(box.parentElement.textContent);
Try It Yourself

How It Works

  1. beforebegin. Text node sits just before the target.
  2. afterend. Text node sits just after the target.
  3. Parent required. MDN: these positions need an element parent in the tree.
  4. Inside vs outside. Use afterbegin/beforeend to stay inside the element.
Compatibility

Browser Support

Element.insertAdjacentText() is Baseline Widely available (MDN: across browsers since April 2018). Safe for modern teaching and production code.

✓ Baseline · Widely available

insertAdjacentText()

Insert a plain text node at a position relative to an element.

Wide Baseline
Google Chrome Full support
Supported
Mozilla Firefox Full support
Supported
Apple Safari Full support
Supported
Microsoft Edge Full support
Supported
Opera Full support
Supported
Internet Explorer Limited / prefer modern
Partial
insertAdjacentText() Widely available

Bottom line: Use insertAdjacentText whenever the content must remain plain text — especially user-provided strings.

Frequently Asked Questions

It inserts a new text node at a position relative to the element (MDN). You pass a position string and plain text — the string is not parsed as HTML.
No. MDN marks Element.insertAdjacentText() as Baseline Widely available (across browsers since April 2018). It is not Deprecated, Experimental, or Non-standard.
Nothing useful — the return value is undefined (MDN).
insertAdjacentText() creates a Text node from a plain string. insertAdjacentHTML() parses HTML markup, which can be unsafe with user input (MDN).
beforebegin, afterbegin, beforeend, and afterend — the same four slots as insertAdjacentHTML() and insertAdjacentElement() (MDN).
When content should stay plain text — for example user comments, labels, or chat messages. Tags like <b> are shown as characters, not markup.

Next: matches()

Learn how to test whether an element matches a CSS selector string.

matches tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element insertAdjacentHTML() Method JavaScript Element matches() Method