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

**jdang** · 04-28-2011 08:52 AM

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>

**Kor** · 04-28-2011 08:58 AM

Originally Posted by jdang

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.

**WolfShade** · 04-28-2011 09:24 AM

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.

**jdang** · 04-28-2011 09:26 AM

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

**svidgen** · 04-28-2011 09:39 AM

Use Chrome: right click -> inspect element. You can interact with the "live source" / DOM directly. Very cool.

**Kor** · 04-28-2011 09:58 AM

Originally Posted by jdang

Currently, I am using IE9, are there any plugin to help me to see those elements?

Press F12 (opens the Developer Tools)

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

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions