如何访问在使用 DOM 进行其他进程后生成的 div 的 innerHTML

我想访问div的innerHTML属性，其中的文本是在执行某些函数后生成的。例如，假设我有这种登录机制：

   <?php
        $message = "";
        if(isset($_POST['user'] ) )  
            $user = $_POST['user'];
        if(isset($_POST['pass']))  {
            $pass = $_POST['pass'];

        if($user == "one_answers" && $pass == "one_answers" )
        {
            $message = "success";
        }
        else 
            $message = "fail";
}
?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="msgDiv">
                <?php
                    if(isset($message) )
                        echo $message;
                ?>
</div>
    <form  action="#" method="POST">
            <input type="text" name="user" class="user">
            <input type="text" name="pass" class="user">
            <input type="submit" name="submit" id="button" value="submit">
    </form>

    <script>
            var user = document.getElementsByClassName('user')[0];
            var pass = document.getElementsByClassName('user')[1];
            var button = document.getElementById('button');
            var msg = document.getElementsByClassName('msgDiv');
            button.onclick= function()
            {
                user.value= "one_answers";
                pass.value="an";
                msg.onchange = function()  {
                alert(msg.textContent);
                } //THIS CODE IS WRONG, I SUPPOSE
            }   

    </script>
</body>
</html>

仅当登录成功或失败时，才会生成"msgDiv"中的文本。如何使用 DOM 函数获取此生成的文本？

你已经用getElementById(id)获取了元素，然后用.innerHTML访问了innerHTML属性。根据您想要的内容，您可能正在寻找内部文本或文本内容。

关于 innerHTML、innerText 和 textContent 的快速说明：

innerHTML 可以更改页面上的实际 html 元素，包括删除或添加元素。

innerText 将获取或设置元素的纯文本;但是，会意识到某些情况，并且可能会省略一些文本。

textContent 将获取所有纯文本。

var $ = function(id){
    //commonly used function to easily access html elements from javascript
    return document.getElementById(id);
}
$("msgDiv").innerHTML = "something";

使用 document.getElementById("msgDiv").textContent

function modifier(){
    document.getElementById("msgDiv").textContent = "message";
}
modifier();
console.log(document.getElementById("msgDiv").textContent);

<div id="msgDiv"></div>
    <form>
     <input type="text" name="user">
     <input type="password" name="password">
     <input type="submit" value="submit">
    </form>

编辑：#button绑定了2个事件：一个是form提交，另一个是您编写的用于alert响应字符串message的onclick函数。因此，现在当您单击submit按钮时，form正在提交，并且您的msgDiv可能正在显示响应消息。而且，由于您已在 onclick 事件中编写了 alert 函数，因此再次单击它最终将触发另一个表单提交。

你可以简单地写<?php if(isset($message)){echo "alert('".$message."');";} ?>

编辑2：

无需初始化$message。删除或注释掉行$message = "";
在关闭script标记之前添加<?php if(isset($message)){echo "alert('".$message."');";} ?>。每当在提交后设置form message值时，这将alert该值。

相关内容

最新更新

热门标签：