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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content