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().

我通过警报检查了该功能，然后通过了。当我＆＃34; view-source＆＃34;对于函数initialise（）完成后的页面，没有添加新元素。

所以我的第一个问题是按照主题：可以用view-source看到用javascript插入的新元素吗？

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

我也尝试从按钮调用initialise（），但是没有任何反应。

我是javascript的新手，所以任何评论都会受到赞赏。

编辑：谢谢大家。好的，view-source看不到它......

如果我将页面传递给php并加载它：$ page = file_get_contents（＆＃34; mypage.html＆＃34;）; ，如果我回复回来：echo $ page;那么我猜新创建的元素也不会出现在那里？

如果是这种情况，你会如何将包括新js创建元素在内的整个事件传递给php？

Answer 1

在进行客户端修改之前，浏览器中的查看源会显示页面的原始HTML源 - 来自服务器的确切内容。

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

要查看动态更改，请使用DOM检查器。 Safari，Chrome和IE中都内置了一个，Firebug是Firefox的附加组件。所有这些都将显示整个DOM层次结构，与浏览器中当前存在的完全一样。实际上，您甚至可以在检查器中自己修改实时DOM。

您当前的代码正在插入一个空的标记，该标记可能不可见，因为它是空的。如果您将一些内容放入标记，则会成功在您的网页中插入一个标记。它只会插入一个，因为您只创建一个，然后尝试在每个表单之前插入相同的标记。您可以在此处查看当前代码的作用：http://jsfiddle.net/jfriend00/3fvbj7re/。

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

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元素，当您单击视图源时也无法看到它们。

要查看这些元素，您应该使用浏览器的开发者控制台。

Answer 3

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

在Chrome中，例如转到view-＆gt; developer-＆gt;开发人员工具

Answer 4

我想补充一点，只是因为您无法在view-source中看到它，但这并不意味着您无法使用document.getElementById（'el-id'）或类似的东西来访问新创建的元素。有点问题，但要注意。

可以使用view-source查看使用javascript插入的新元素吗？

4 个答案: