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

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

replaceAdjacentText method

Browser support:

Replace the contents of the TextNode located at the specified position relative to the current element with the specified text.

If no TextNode exists at the specified position, then the replaceAdjacentText method creates a new TextNode from the specified text and inserts it at the specified position.

For a cross-browser solution, use the removeChild, createTextNode, insertBefore and appendChild methods to implement similar functionality. See Example 2 for details.

Syntax:

object.replaceAdjacentText (where, textToInsert);

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

Parameters:

where

Required. String that specifies the position of the TextNode that should be replaced or inserted.

One of the following values:

beforeBegin

Identifies the previous sibling of the current element.

afterBegin

Identifies the first child of the current element.

beforeEnd

Identifies the last child of the current element.

afterEnd

Identifies the next sibling of the current element.

textToInsert

Required. String that specifies the text to insert.

Return value:

String. The replaced text.

Example HTML code 1:

This example illustrates the use of the replaceAdjacentText method:

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

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

            if (relTo.replaceAdjacentText) {        // Internet Explorer, Opera, Google Chrome and Safari
                relTo.replaceAdjacentText (where, textToInsert);
            }
            else {
                alert ("Your browser does not support the insertAdjacentHTML method!");
            }
        }
    </script>
</head>
<body>
    Some text before the destination element.
    <div id="relTo" style="width:400px; background:#e0d0a0;">
        Some text at the beginning of the destination element.
        <br /><br />
        Some text at the end of the destination element.
    </div>
    Some text after the destination element.
    <br /><br />
    Change the selected item to replace text relative to the destination element.
    <select onchange="ReplaceText (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 ReplaceText (select) {
            var selected = select.selectedIndex;
            var where = select.options[selected].text;

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

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

                switch (where) {
                case "beforeBegin":
                    if (relTo.previousSibling && relTo.previousSibling.nodeType == 3) {
                        relTo.parentNode.removeChild (relTo.previousSibling);
                    }
                    relTo.parentNode.insertBefore (textNodeToInsert, relTo);
                    break;
                case "afterBegin":
                    if (relTo.firstChild && relTo.firstChild.nodeType == 3) {
                        relTo.removeChild (relTo.firstChild);
                    }
                    relTo.insertBefore (textNodeToInsert, relTo.firstChild);
                    break;
                case "beforeEnd":
                    if (relTo.lastChild && relTo.lastChild.nodeType == 3) {
                        relTo.removeChild (relTo.lastChild);
                    }
                    relTo.appendChild (textNodeToInsert);
                    break;
                case "afterEnd":
                    if (relTo.nextSibling && relTo.nextSibling.nodeType == 3) {
                        relTo.parentNode.removeChild (relTo.nextSibling);
                    }
                    relTo.parentNode.insertBefore (textNodeToInsert, relTo.nextSibling);
                    break;
                }
            }
        }
    </script>
</head>
<body>
    Some text before the destination element.
    <div id="relTo" style="width:400px; background:#e0d0a0;">
        Some text at the beginning of the destination element.
        <br /><br />
        Some text at the end of the destination element.
    </div>
    Some text after the destination element.
    <br /><br />
    Change the selected item to replace text relative to the destination element.
    <select onchange="ReplaceText (this);">
        <option>beforeBegin</option>
        <option>afterBegin</option>
        <option>beforeEnd</option>
        <option>afterEnd</option>
    </select>
</body>