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

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

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

所以我的第一个问题是根据主题:可以使用 View 源查看使用 javascript 插入的新元素吗？

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

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

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

编辑:谢谢大家。 ok，view-source看不到...

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

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

Answer 1

在浏览器中查看源代码会向您显示页面的原始 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;