专注前端素材！
源代码：
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>素材8网教程(study.sucai8.cn)</title> </head> <body> <p id="p1">这是一个段落</p> <p id="p2">这是另一个段落；</p> <p id="demo">单击按钮来比较两个段落的位置。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ var p1=document.getElementById("p1").lastChild; var p2=document.getElementById("p2").lastChild; var x=document.getElementById("demo"); x.innerHTML=p1.compareDocumentPosition(p2); } </script> <p> 1: 这两个节点不属于同一个文档<br> 2: P1位于P2之后。<br> 4: P1位于P2之前。<br> 8: P1在P2里面。<br> 16:P2在P1里面。<br> 32:这两个节点没有关系，或者它们是同一个元素上的两个属性。</p> <p><strong>注意:</strong>Internet Explorer 8或者更早的版本不支持comparedocumentposition方法。</p> <p><strong>注意:</strong> 返回值也可以是值的组合。即返回20意味着P2在P1里面并且P1（16）定位在P2（4）之前。</p> </body> </html>
运行结果