W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<body>
<h1>The Element Object</h1>
<h2>The compareDocumentPosition() Method</h2>

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

<p>The position of the two paragraphs is:</p>
<p id="demo"></p>

<p>
<strong>Possible 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 are attributes on the same element.</p>

<p>The return value can also be a combination of values.
Return value 20 means that p2 is inside p1 (16) AND p1 is positioned before p2 (4).</p>

</body>

</html>

​x
 
<!DOCTYPE html><html><body><h1>The Element Object</h1><h2>The compareDocumentPosition() Method</h2>​<p id="p1">This is a paragraph</p><p id="p2">This is another paragraph</p>​<p>The position of the two paragraphs is:</p><p id="demo"></p>​<p><strong>Possible 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 are attributes on the same element.</p>​<p>The return value can also be a combination of values.Return value 20 means that p2 is inside p1 (16) AND p1 is positioned before p2 (4).</p>​<script>const p1 = document.getElementById("p1").lastChild;const p2 = document.getElementById("p2").lastChild;let position = p1.compareDocumentPosition(p2);document.getElementById("demo").innerHTML = position;</script>​</body>​<!-- Mirrored from www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_compdocpos by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 21 Dec 2022 17:39:43 GMT --></html>​