The parentNode property is used to return the parent node of the specified node as a Node object. It is a read-only property.
Syntax:
node.parentNode
Return value: This property returns a parent element of the specified node or null if the current node has no parent element.
Example: In this example, we will use the parentNode property
<!DOCTYPE html>
<html>
<head>
<title>
DOM parentNode Property
</title>
</head>
<body onload="start ()" style="text-align: center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
DOM parentNode Property
</h2>
<button onclick="geek ()">Click me!</button>
<br>
<br>
<div id="container">
</div>
<script>
let Text = null;
// function to call on body load
function start() {
// creating a span element
Text = document.createElement("span");
Text.style.color = "green";
Text.innerHTML = "GeeksforGeeks";
}
// check function
function geek() {
let container =
document.getElementById("container");
// checking if parent node of Text
// matches with that of var container
if (Text.parentNode === container) {
container.removeChild(Text);
} else {
container.appendChild(Text);
}
}
</script>
</body>
</html>
Output:
Click the button again to hide the text.
Supported Browsers: The browser supported by parentNode property are listed below:
- Google Chrome 1.0 and above
- Edge 12 and above
- Internet Explorer 5.5 and above
- Firefox 1.0 and above
- Opera 7 and above
- Safari 1.1 and above