2

我的代码如下：

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

我用警报检查了这个功能，它通过了。当我在函数 initialise() 完成后为页面“查看源代码”时，没有添加新元素。

所以我的第一个问题是根据主题：用 javascript 插入的新元素可以通过视图源看到吗？

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

我还尝试从按钮调用 initialise()，但也没有任何反应。

我是 javascript 的新手，所以任何评论都将不胜感激。

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

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

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

4

4 回答 4

3

在浏览器中查看源代码向您显示页面的原始 HTML 源代码-正是在进行任何客户端修改之前来自服务器的内容。

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

要查看已动态进行的更改，请使用 DOM 检查器。Safari、Chrome 和 IE 中内置了一个，而 Firebug 是 Firefox 的附加组件。All 将向您展示整个 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;
于 2014-08-09T06:32:02.833 回答
2

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

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

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

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

于 2014-08-09T06:26:40.797 回答
0

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

例如，在 Chrome 中，转到查看-> 开发人员-> 开发人员工具

于 2014-08-09T06:21:42.007 回答
0

我想补充一点，只是因为您无法通过视图源看到它，并不意味着您无法使用 document.getElementById('el-id') 或类似的东西访问新创建的元素。有点离题，但重要的是要注意。

于 2020-03-17T03:51:59.043 回答