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', 'sub

Solution 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:

functioninitialise() {
    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;

Solution 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.

Solution 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

Solution 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.