用javascript插入的新元素可以在viewsource中看到吗?

Question

我的代码如下:

window.onload = initialise;
function initialise() {
    var objPForSubmitMsg = document.createElement('p');
    objPForSubmitMsg.setAttribute('class', 'submitmsg');
    var arObjForms = document.getElementsByTagName('form');
    for (i = 0; i < arObjForms.length; i++) {
        var objFormParent = arObjForms[i].parentNode;
        alert(objFormParent);
        objFormParent.insertBefore(objPForSubmitMsg, arObjForms[i]);
    }
} // end initialise().

我检查了警报功能，它通过了。在initialize()函数完成后，当我为页面"查看源"时，没有添加新元素。

所以我的第一个问题是每个主题:可以用javascript插入的新元素被看到与视图源?

如果是，那么我上面的代码有什么问题?为什么不插入新元素?

我还尝试从按钮调用initialize()，但也没有发生任何事情。

我是javascript的新手，所以任何评论都会很感激。

编辑:谢谢大家。好的，视图源看不到它…

如果我把我的页面传递给php并加载它:$page = file_get_contents("mypage.html");，如果我用echo $page;那么我猜新创建的元素也不会出现在那里?

如果是这样的话，你怎么把整个东西包括js新创建的元素传递给php?

Answer 1

在浏览器中查看源显示了页面的原始HTML源 - 完全是来自服务器的在任何客户端修改之前。

因此，它将NOT包含javascript对页面所做的任何动态更改。

要动态查看所做的更改，请使用DOM检查器。Safari浏览器、Chrome浏览器和IE浏览器内置了Firebug, Firefox浏览器也内置了Firebug。所有这些都将向您显示整个DOM层次结构，就像它目前存在于浏览器中一样。实际上，您甚至可以在检查器中自己修改活动DOM。

---

您当前的代码正在插入一个空的<p>标记，该标记可能不可见，因为它是空的。如果您将一些内容放入<p>标签，它将成功地在您的页面中插入一个<p>标签。它只会插入一个，因为您只创建了一个，然后您尝试在每个表单之前插入相同的标记。您可以在这里查看当前代码的功能:http://jsfiddle.net/jfriend00/3fvbj7re/.

如果希望在页面中的每个表单之前插入<p>标记，则需要为每个插入创建单独的<p>标记，如下所示:

function initialise() {
    var arObjForms = document.getElementsByTagName('form');
    var objPForSubmitMsg;
    for (i = 0; i < arObjForms.length; i++) {
        objPForSubmitMsg = document.createElement('p');
        objPForSubmitMsg.innerHTML = "hello";    // give tag some content
        objPForSubmitMsg.setAttribute('class', 'submitmsg');
        var objFormParent = arObjForms[i].parentNode;
        objFormParent.insertBefore(objPForSubmitMsg, arObjForms[i]);
    }
}
window.onload = initialise;

Answer 2

您在运行时添加的Dom元素在第一次加载页面时不存在。换句话说，它不是你原始页面的一部分。

当您查看原始页面的源代码时，它只显示HTMl，而不执行任何JS或CSS，因为您只在源代码中浏览HTMl。

因此，即使在页面中添加了动态html元素，当您单击"查看源"时也无法看到它们。

要查看这些元素，您应该使用浏览器的Developer Console。

如果您想查看当前DOM，您应该使用代码检查器(开发人员工具)或javascript控制台，而不是源代码，这是原始响应体。

以Chrome为例，进入view->developer->developer tools

我想补充的是，只是因为你不能看到它与viewsource，并不意味着你不能访问你的新创建的元素使用document.getElementById('el-id')或类似的东西。有点跑题了，但需要注意的是。