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

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

insertAdjacentElement method

Browser support:

Inserts an element at the specified position relative to the current element.

If the element has a parent element, then it will be removed from the parent element before the insertion.

For a cross-browser solution, use the appendChild and insertBefore methods instead.

Syntax:

object.insertAdjacentElement (where, element);

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

Parameters:

where

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

One of the following values:

beforeBegin

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

afterBegin

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

beforeEnd

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

afterEnd

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

element

Required. Reference to the element to insert.

Return value:

Returns the inserted element.

Example HTML code 1:

This example illustrates the use of the insertAdjacentElement method:

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

            var relTo = document.getElementById ("relTo");
            var wanderer = document.getElementById ("wanderer");

            if (relTo.insertAdjacentElement) {        // Internet Explorer, Opera, Google Chrome and Safari
                relTo.insertAdjacentElement (where, wanderer);
            }
            else {
                alert ("Your browser does not support the insertAdjacentElement method!");
            }
        }
    </script>
</head>
<body>
    <div id="relTo" style="width:300px; height:50px; background:#e0d0a0;">
        The destination element.
    </div>
    <div id="wanderer" style="color:green">The wanderer element.</div>
    <br /><br />
    Change the selected item to move the wanderer element.
    <select onchange="Move (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 Move (select) {
            var selected = select.selectedIndex;
            var where = select.options[selected].text;

            var relTo = document.getElementById ("relTo");
            var wanderer = document.getElementById ("wanderer");

            if (relTo.insertAdjacentElement) {        // Internet Explorer, Opera, Google Chrome and Safari
                relTo.insertAdjacentElement (where, wanderer);
            }
            else {
                switch (where) {
                case "beforeBegin":
                    relTo.parentNode.insertBefore (wanderer, relTo);
                    break;
                case "afterBegin":
                    relTo.insertBefore (wanderer, relTo.firstChild);
                    break;
                case "beforeEnd":
                    relTo.appendChild (wanderer);
                    break;
                case "afterEnd":
                    relTo.parentNode.insertBefore (wanderer, relTo.nextSibling);
                    break;
                }
            }
        }
    </script>
</head>
<body>
    <div id="relTo" style="width:300px; height:50px; background:#e0d0a0;">
        The destination element.
    </div>
    <div id="wanderer" style="color:green">The wanderer element.</div>
    <br /><br />
    Change the selected item to move the wanderer element.
    <select onchange="Move (this);">
        <option>beforeBegin</option>
        <option>afterBegin</option>
        <option>beforeEnd</option>
        <option selected="selected">afterEnd</option>
    </select>
</body>