为什么Javascript无法获取PHP渲染输出的DOM元素？

• 核心原因是调用属性的对象类型错误：$("#myDiv")是jQuery选择器返回的jQuery封装对象，而innerHTML是原生DOM元素的专属属性，jQuery对象本身没有innerHTML属性，因此访问结果为undefined。
• 你当前已经使用$(document).ready等待DOM加载完成，且PHP是服务端渲染直接输出div到HTML文档中，不存在元素未加载的问题，无需调整代码执行时机。

有两种可直接落地的修改方式：

• 方案1：从jQuery对象中提取原生DOM元素再调用innerHTML

<?php echo "<div id='myDiv'>Hello</div>"; ?>
<script>
    $( document ).ready(function() {
        // 用下标[0]或者get(0)方法即可取到对应的原生DOM对象
        alert( $("#myDiv")[0].innerHTML)
    });
</script>

• 方案2：直接使用jQuery自带的html()方法获取元素内部内容

<?php echo "<div id='myDiv'>Hello</div>"; ?>
<script>
    $( document ).ready(function() {
        alert( $("#myDiv").html())
    });
</script>

如果修改后仍然返回undefined，只需检查PHP输出的div的id是否拼写正确、页面内是否存在重复的myDivid即可。

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