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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > parentNode

parentNode property

Browser support:

Returns the parent element of the current node in the DOM hierarchy.

Newly created (createElement) and removed (removeChild) elements have no parent element in Firefox, Google Chrome, Opera, Safari and Internet Explorer from version 9. In older Internet Explorer versions, newly created elements have no parent but when the HTML content of a newly created element is modified (innerHTML, appendChild, etc.) the element is placed in a DocumentFragment node. Removed elements are also placed in a DocumentFragment node in Internet Explorer before version 9.

Note: in HTML documents, the parent node of the root element (the html element) is the document object.

Syntax:

object.parentNode;

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

This property is read-only.

Possible values:

Retrieves a reference to the parent object or null if the current node has no parent element.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the parentNode property:

<head>
    <script type="text/javascript">
        var redText = null;
        function Init () {
            redText = document.createElement ("span");
            redText.style.color = "red";
            redText.innerHTML = "Red text";
        }

        function AddRemoveRedText () {
            var container = document.getElementById ("container");
            if (redText.parentNode === container) {
                container.removeChild (redText);
            }
            else {
                container.appendChild (redText);
            }
        }
    </script>
</head>
<body onload="Init ()">
    <button onclick="AddRemoveRedText ()">Add/Remove red text</button>
    <br /><br /><br />
    <div id="container">
    </div>
</body>