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

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content