代码之家 › 专栏 › 技术社区 › vytaute

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

jquery html php javascript

vytaute · 技术社区 · 3 年前

我用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>

这怎么可能呢?

0 回复 | 直到 3 年前

JMP 3 年前

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

使用HTML

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

被解释为:

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

其中第1行和第3行被视为标记,另外两行被视作为输出。

enhzflep 3 年前

以下代码存在于“c:\examplep\htdocs\snippets\nov21\something.php”中,当请求时为 localhost/snippets/nov21/something.php (web根目录为c:\examplep\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>

poorly-written-code 3 年前

PHP 是一种服务器端语言,它被呈现为服务器端语言。这意味着如果只打开 .php 文件,如果你试图在在线编辑器中运行代码,它将无法工作。它需要由web服务器托管,然后服务器在请求时对其进行渲染。

这怎么可能呢? 由于php从未被渲染,因此 <div> 不存在。

话虽如此,还有一些其他注意事项:

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

)你可以把 <script> 它在身体部位的底部,比你不需要使用的要多 $(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>