Javascript 无法访问用 php 加载的元素答案

【问题标题】：Javascript cannot reach element loaded with phpJavascript 无法访问用 php 加载的元素
【发布时间】：2021-11-03 08:35:32
【问题描述】：

我使用 PHP 加载 div，然后我想使用 Javascript 从 HTML 中获取它。通过 id 获取元素警报 undefined.

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

这怎么可能？

【问题讨论】：

我编辑了我的问题，请参阅代码。它仍然不起作用。而且奇怪的是在hello后面显示php问号。
(0) 你用什么来服务页面？ (1) 有问题的文件的扩展名是什么？ (2) 本文档是否有意省略body标签？
如果您看到?> 输出到 HTML，这意味着 PHP 没有被解释。这可以通过在浏览器中查看源来确认。如果您在输出中看到 PHP 代码，这就是您的问题。很可能是因为您为文件指定了.html 扩展名而不是.php。更改它，代码应该可以正常工作。
我的文件格式是.php。我希望像 html 一样插入它，以便更好地理解和能够像 stackoverflow 上的代码 sn-p 一样运行它
请将脚本和php代码保留在标签内并测试

标签： javascript php html jquery

【解决方案1】：

您已使用.htm 扩展名保存文件。将其更改为.php，代码将按预期工作。

使用 HTML

<?php echo "<div id='myDiv'>Hello</div>" ?>

被解释为：

<?php echo "<div id='myDiv'>
Hello
</div>
" ?>

第 1 行和第 3 行被视为标签，另外两行作为输出。

【讨论】：

是的，我的文件原来是 .php 文件。我的主要问题是，在加载 php 后，我无法使用 javascript 通过 id 访问我的 div
它不会加载到 SE sn-p 或任何 php 游乐场，因为它不是纯 PHP，但它应该从您的服务器运行。

【解决方案2】：

以下代码存在于“c:\xampp\htdocs\sn-ps\nov21\something.php”中，当请求为localhost/snippets/nov21/something.php（web-root 目录为 c:\xampp\htdocs\）时，执行你提到的动作。

<!doctype html>
<html>
<head>
<script>
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
    alert( document.querySelector('#myDiv').innerHTML );
}
</script>
</head>
<body>
    <?php echo("<div id='myDiv'>Hello</div>"); ?>
</body>
</html>

在浏览器中查看页面源返回以下内容：

<!doctype html>
<html>
<head>
<script>
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
    alert( document.querySelector('#myDiv').innerHTML );
}
</script>
</head>
<body>
    <div id='myDiv'>Hello</div></body>
</html>

【讨论】：

【解决方案3】：

PHP 是一种服务器端语言，它是在服务器端呈现的。这意味着如果您仅使用 Web 浏览器打开 .php 文件，它将不会呈现，如果您尝试在在线编辑器中运行代码，它将无法工作。它需要由 Web 服务器托管，然后服务器在请求时呈现它。

这怎么可能？因为 php 永远不会被渲染，因此 <div> 不存在。

话虽如此，还有一些注意事项：

) php 进入你的 html 的 <body></body> 部分

) 您可以将<script>s 放在正文部分的底部，而不需要使用$(document).ready()，因为如果您位于<body> 的底部，则文档已准备就绪...

这在在线编辑器中不起作用，但您的代码应如下所示：

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

【讨论】：