Question

我想访问div的innerHTML属性，其中的文本在执行某个函数后生成。比方说，我有这个登录机制：

   <?php
        $message = "";

        if(isset($_POST['user'] ) )  
            $user = $_POST['user'];
        if(isset($_POST['pass']))  {
            $pass = $_POST['pass'];


        if($user == "ans" && $pass == "ans" )
        {
            $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= "ans";
                pass.value="an";

                msg.onchange = function()  {
                alert(msg.textContent);
                } //THIS CODE IS WRONG, I SUPPOSE
            }   



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

只有在登录成功或失败时才会生成“msgDiv”中的文本。如何使用DOM函数获取生成的文本？

Answer 1

使用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提交，另一个是您写入onclick的{{1}}函数响应字符串alert。现在，当您点击message按钮时，submit正在提交，可能您的form正在显示回复消息。而且，由于您已在msgDiv事件中编写了alert函数，因此再次点击该函数最终会触发另一个表单提交。

您只需撰写onclick

即可

编辑2：

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

Answer 2

您已获取getElementById(id)元素，然后使用.innerHTML访问innerHTML属性。根据您的需要，您可能正在寻找innerText或textContent。

关于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";

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

2 个答案: