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

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

insertAdjacentHTML method

Browser support:

Inserts a HTML formatted text at the specified position relative to the current element.

In Firefox, use the innerHTML property or the Range object to implement similar functionality. See Example 2 for details.

Syntax:

object.insertAdjacentHTML (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 HTML formatted text needs to be inserted.

One of the following values:

beforeBegin

Inserts the text immediately before the current element.

afterBegin

Inserts the text immediately after the start of the current element.

beforeEnd

Inserts the text immediately before the end of the current element.

afterEnd

Inserts the text immediately after the current element.

text

Required. String that specifies the HTML formatted text to insert.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the insertAdjacentHTML method:

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

            var relTo = document.getElementById ("relTo");
            var htmlToInsert = "The position is <b>" + where + "</b>.";

            if (relTo.insertAdjacentHTML) {        // Internet Explorer, Opera, Google Chrome and Safari
                relTo.insertAdjacentHTML (where, htmlToInsert);
            }
            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 HTML formatted text relative to the destination element.
    <select onchange="InsertHTML (this);">
        <option>beforeBegin</option>
        <option>afterBegin</option>
        <option>beforeEnd</option>
        <option selected="selected">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 InsertHTML (select) {
            var selected = select.selectedIndex;
            var where = select.options[selected].text;

            var relTo = document.getElementById ("relTo");
            var htmlToInsert = "The position is <b>" + where + "</b>.";

            if (relTo.insertAdjacentHTML) {        // Internet Explorer, Opera, Google Chrome and Safari
                relTo.insertAdjacentHTML (where, htmlToInsert);
            }
            else {
                var range = document.createRange ();
                var docFragmentToInsert = range.createContextualFragment (htmlToInsert);

                switch (where) {
                case "beforeBegin":
                    relTo.parentNode.insertBefore (docFragmentToInsert, relTo);
                    break;
                case "afterBegin":
                    relTo.insertBefore (docFragmentToInsert, relTo.firstChild);
                    break;
                case "beforeEnd":
                    relTo.appendChild (docFragmentToInsert);
                    break;
                case "afterEnd":
                    relTo.parentNode.insertBefore (docFragmentToInsert, 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 HTML formatted text relative to the destination element.
    <select onchange="InsertHTML (this);">
        <option>beforeBegin</option>
        <option>afterBegin</option>
        <option>beforeEnd</option>
        <option>afterEnd</option>
    </select>
</body>