Tryit Editor v2.9

Edit This Code:
<!DOCTYPE html>
<html>
<body>

<p id="p1">This is a paragraph</p>
<p id="p2">This is another paragraph</p>

<p>Click the button to compare the position of the two paragraphs.</p>

<button onclick="myFunction()">Try it</button>

<p>
<strong>Possible return values:</strong><br>
1: The two nodes do not belong to the same document.<br>
2: p1 is positioned after p2.<br>
4: p1 is positioned before p2.<br>
8: p1 is positioned inside p2.<br>
16: p2 is positioned inside p1.<br>
32: The two nodes has no relationship, or they are two attributes on the same element.</p>

<p><strong>Note:</strong> The compareDocumentPosition method is not supported in Internet Explorer 8 and earlier.</p>

<p><strong>Note:</strong> The returnvalue could also be a combination of values. I.e. the returnvalue 20 means that p2 is inside p1 (16) AND p1 is positioned before p2 (4).</p>

<p id="demo"></p>

<script>
function myFunction() {
    var p1 = document.getElementById("p1").lastChild;
    var p2 = document.getElementById("p2").lastChild;
    var x = p1.compareDocumentPosition(p2);
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>