Javascript无法获取PHP加载的DOM元素，返回undefined是什么原因？

核心原因1：HTML结构不规范，缺失<body>标签 #

你提供的代码中<head>标签闭合后直接输出了div元素，没有将页面内容包裹在规范的<body>标签内。部分浏览器解析这类不规范HTML时会出现DOM树构建异常，导致jQuery在DOM ready阶段无法正确匹配到对应id的元素。

核心原因2：PHP代码未正常解析执行 #

如果存在以下任意一种情况，PHP代码不会被执行，会直接作为文本输出到前端页面，自然不存在id为myDiv的元素：

• 代码文件后缀不是.php
• 没有将代码部署在支持PHP解析的服务环境中，直接本地打开文件
• PHP运行环境配置错误，代码执行时报错中断

修复后的参考代码 #

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
   <?php echo "<div id='myDiv'>Hello</div>"; ?>
   <script>
      $(document).ready(function() {
        alert($("#myDiv").html());
    });
   </script>
</body>
</html>

快速排查方法 #

打开浏览器开发者工具的「元素」面板，查看实际渲染后的DOM结构中是否存在id为myDiv的div元素，即可快速定位是PHP输出异常还是DOM解析异常。

内容的提问来源于stack exchange，提问作者vytaute