In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > insertAdjacentText

insertAdjacentText method

Browser support:

Creates a new TextNode from the specified text and inserts it at the specified position relative to the current element.

In Firefox, use the createTextNode, insertBefore and appendChild methods to implement similar functionality. See Example 2 for details.

Syntax:

object.insertAdjacentText (where, text);

You can find the related objects in the Supported by objects section below.

Parameters:

where

Required. String that specifies the position where the TextNode needs to be inserted.

One of the following values:

beforeBegin

Inserts the TextNode as the previous sibling of the current element.

afterBegin

Inserts the TextNode as the first child of the current element.

beforeEnd

Inserts the TextNode as the last child of the current element.

afterEnd

Inserts the TextNode as the next sibling of the current element.

text

Required. String that specifies the contents of the TextNode to insert.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the insertAdjacentText method:

<head>
    <script type="text/javascript">
        function InsertText (select) {
            var selected = select.selectedIndex;
            var where = select.options[selected].text;

            var relTo = document.getElementById ("relTo");
            var textToInsert = "The position is " + where + ".";

            if (relTo.insertAdjacentText) {        // Internet Explorer, Opera, Google Chrome and Safari
                relTo.insertAdjacentText (where, textToInsert);
            }
            else {
                alert ("Your browser does not support the insertAdjacentHTML method!");
            }
        }
    </script>
</head>
<body>
    <div id="relTo" style="width:300px; background:#e0d0a0;">
        The destination element.
    </div>
    <br /><br />
    Change the selected item to insert text relative to the destination element.
    <select onchange="InsertText (this);">
        <option>beforeBegin</option>
        <option>afterBegin</option>
        <option>beforeEnd</option>
        <option>afterEnd</option>
    </select>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example implements a cross-browser solution for the previous example:

<head>
    <script type="text/javascript">
        function InsertText (select) {
            var selected = select.selectedIndex;
            var where = select.options[selected].text;

            var relTo = document.getElementById ("relTo");
            var textToInsert = "The position is " + where + ".";

            if (relTo.insertAdjacentText) {        // Internet Explorer, Opera, Google Chrome and Safari
                relTo.insertAdjacentText (where, textToInsert);
            }
            else {
                var textNodeToInsert = document.createTextNode (textToInsert);

                switch (where) {
                case "beforeBegin":
                    relTo.parentNode.insertBefore (textNodeToInsert, relTo);
                    break;
                case "afterBegin":
                    relTo.insertBefore (textNodeToInsert, relTo.firstChild);
                    break;
                case "beforeEnd":
                    relTo.appendChild (textNodeToInsert);
                    break;
                case "afterEnd":
                    relTo.parentNode.insertBefore (textNodeToInsert, relTo.nextSibling);
                    break;
                }
            }
        }
    </script>
</head>
<body>
    <div id="relTo" style="width:300px; background:#e0d0a0;">
        The destination element.
    </div>
    <br /><br />
    Change the selected item to insert text relative to the destination element.
    <select onchange="InsertText (this);">
        <option>beforeBegin</option>
        <option>afterBegin</option>
        <option>beforeEnd</option>
        <option>afterEnd</option>
    </select>
</body>