我新添加的HTML代码在哪里？

Question

为什么在jQuery触发器后查看view-source时，我不能看到jQuery中新添加的代码？

当密码不正确时，脚本中的代码（如下所示）会添加一个简单的alert-info段落（见图片）。

以下是添加代码后页面的外观：

这是触发后的我的观察源：

<div class="container">

    <form id = "log" class="form-signin">
        <h1 class="form-signin-heading text-muted">Sign In</h1>
        <input type="text" class="form-control" placeholder="Email address" required autofocus="" name = "user">
        <input type="password" class="form-control" placeholder="Password" required name = "pwd">
        <label id="submit" class="btn btn-lg btn-primary btn-block">
            Sign In
        </label>
    </form>

</div>
</div>
<script src = "https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
 $('#submit').on('click', function(){
        var form = $('#log').serialize();

        $.post('/nimda', form).done(function(data) {
                if(data=="False" && $('#err').length==0){
                    $('#log').prepend('<p id = "err" class = "alert alert-info" align = "centre" > Incorrect!</p>');
                }
                else
                {
                    $('#err').remove();
                }
        });
});
</script>

Answer 1

view-source下载页面来源 - 它不会向您显示当前的内容，当您下载时，您的脚本尚未运行。要通过脚本所做的更改来查看它，请右键单击并选择＆＃34;检查＆＃34;页面。

Answer 2

当您向页面动态添加元素时，您不会更改原始HTML（视图源显示的内容）。

相反，您只是在改变DOM的状态。

view-source显示原始页面而不是当前状态。

要查看DOM的当前状态，您需要使用浏览器提供的开发人员工具。