<!DOCTYPE html>
<html lang="en-US">
<body>
<p id="point1">I'm paragraph 1</p>
<p id="point2">I'm paragraph 2</p>
<button onclick="myFunction()">Click Me</button>
<script>
var p1 = document.getElementById("point1");
var p2 = document.getElementById("point2");
function myFunction(){
alert(p1.compareDocumentPosition(p2));
}
</script>
<p>Return Values:</p>
<p>0 - p1 and p2 are same element.</p>
<p>1 - p1 and p2 do not belong to the same document.</p>
<p>2 - p1 is positioned after p2.</p>
<p>4 - p1 is positioned before p2.</p>
<p>8 - p1 is positioned inside p2.</p>
<p>16 - p2 is positioned inside p1.</p>
<p>32 - p1 and p2 has no relationship.</p> </body>
</html>