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

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?

Solution

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  tag which may not be visible because it's empty. If you put some content into the  tag, it successfully inserts one  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  tag inserted before each form in the page, you'd need to create a separate  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;