www.webdeveloper.com
Results 1 to 6 of 6

Thread: View source does not show elements which were added by javascript to the DOM

  1. #1
    Join Date
    Apr 2011
    Posts
    4

    View source does not show elements which were added by javascript to the DOM

    Hi Everyone,

    Does anyone know why the elements which were added to the DOM by java script are not available when I try to view source? The element were there but are missing when try to view source.

    thanks,

    Jdang

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body>

    <input type="button" id="myButton" onclick=TestFunction() value="Click Me"/>

    </body>

    </html>
    <script type="text/javascript">
    document.body.appendChild(NewDiv("div01", "Hello...."));
    function NewDiv(id, text) {

    var myDiv = document.createElement("Div");
    myDiv.id = id;
    myDiv.innerHTML = "<H3>" + text + "</h3>"
    return myDiv;

    }

    function TestFunction() {

    var obj = document.getElementById("div01");

    if (obj != null) {
    alert(obj.innerHTML);
    }
    }

    </script>

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by jdang View Post
    Does anyone know why the elements which were added to the DOM by java script are not available when I try to view source?
    Because javascript adds them dynamically, or the View Source shows only the static elements. JavaScript does not write physically the new elements. It creates them on the client-side. Let's say, virtually.

    But what bothers you? If you want to see the javascript new created elements/attributes by all means, use Firefox and install the Add-on called FireBug.

  3. #3
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Because the JavaScript-created elements are created after the HTML code has already been parsed by the browser, and the "View Source" only shows you the code received by the browser - anything done browser-side (like JavaScript-created elements done by browser during parsing) is too late for the "View Source" snapshot.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  4. #4
    Join Date
    Apr 2011
    Posts
    4
    Yes, it bothers me a lot because I want to debug by page by check the DOM though view source. Currently, I am using IE9, are there any plugin to help me to see those elements?

    thanks,

    Jdang

  5. #5
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Use Chrome: right click -> inspect element. You can interact with the "live source" / DOM directly. Very cool.
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by jdang View Post
    Currently, I am using IE9, are there any plugin to help me to see those elements?
    Press F12 (opens the Developer Tools)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles