Can new elements inserted with javascript be seen with view-source?

Question

My code is as follows:

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

I checked the function with alerts and it goes through. When I "view-source" for the page after the function initialise() is done, there are no new elements added.

So my first question would be as per subject: can new elements inserted with javascript be seen with view-source?

If yes, then what is wrong with my code above? Why it doesn't insert new element?

I also tried to call initialise() from a button, but nothing happens then either.

I'm new to javascript so any comments would be appreciated.

EDIT: Thanks everyone. Ok, view-source cannot see it...

Than if I pass my page to php and load it with: $page = file_get_contents("mypage.html"); , if I echo that back with: echo $page; then I guess the newly created elements will not appear there either?

If that is the case, how would you pass the whole thing including the newly js created elements to php?

Answer 1

View Source in the browser shows you the original HTML source of the page - exactly what came from the server before any client side modifications have been made.

As such, it will NOT include any dynamic changes to the page made by javascript.

To see changes that have been made dynamically, use a DOM inspector. There is one built into Safari and Chrome and IE and Firebug is an add-on for Firefox. All will show you the entire DOM hierarchy, live exactly like it currently exists in the browser. In fact, you can even modify the live DOM yourself in the inspector.

---

Your current code is inserting an empty <p> tag which may not be visible because it's empty. If you put some content into the <p> tag, it successfully inserts one <p> tag into your page. It will only insert one because you only create one and then you try to insert the same tag before each form. You can see what your current code does here: http://jsfiddle.net/jfriend00/3fvbj7re/.

If you want a <p> tag inserted before each form in the page, you'd need to create a separate <p> tag for each insertion like this:

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

The Dom elements you add at runtime, were not present when the first time your page was loaded. In other words, it wasn't a part of your original page.

When you view source of your original page, it just shows the HTMl, without executing any JS or CSS, since you only explore HTMl in the source.

Hence, even when you add dynamic html elements in a page, you won't be able to see them when you click view source.

To see those elements, you should use the Developer Console of a browser.

Answer 3

If you want to see the current DOM you should use the code inspector (Developer Tools) or javascript console, not the source, which is what the original response body was.

In Chrome for example go to view->developer->developer tools

Answer 4

I would like to add that just because you can't see it with view-source, doesn't mean you can't access your newly created elements using document.getElementById('el-id') or something similar. Kinda off topic but it's important to note.