Understanding DOM concept

[legolas]

Hi, I'm a new member.In order to understand the DOM concept I wrote a small testscript. The idea is to check for browser DOM support and display the textstring "DOM support" or "no DOM support".In my HTML routine I add the tag <div id="DOMsupport"></div>which is styled according to#DOMsupport { font-size: small; position: absolute; top: 300px; left: 20px; }Now, if I use the javascript code: // check W3C DOM support var theStatus = document.createElement('p'); if (document.getElementById && document.childNodes && document.createElement) { var statustext = document.createTextNode('DOM support'); } else { var statustext = document.createTextNode('no DOM support'); } theStatus.appendChild(statustext); document.getElementById('DOMsupport').appendChild(theStatus);I get "DOM support" written on the screen as expected.But, if I reload the page, it gets written again below the previous line, and the screen fills up with the same message again and again re-loading the page.I guess I have to remove the child-node in some way. So I add some lines and the code then looks like: if (document.getElementById('DOMsupport')) { body[0].removeChild(document.getElementById('DOMsupport')); } // check W3C DOM support var theStatus = document.createElement('p'); if (document.getElementById && document.childNodes && document.createElement) { var statustext = document.createTextNode('DOM support'); } else { var statustext = document.createTextNode('no DOM support'); } theStatus.appendChild(statustext); document.getElementById('DOMsupport').appendChild(theStatus);and I see no output at all. Hmm, maybe I then have to re-create the element.So now my code looks like: if (document.getElementById('DOMsupport')) { body[0].removeChild(document.getElementById('DOMsupport')); } var DOMsupport = document.createElement('div'); DOMsupport.id = 'DOMsupport'; // check W3C DOM support var theStatus = document.createElement('p'); if (document.getElementById && document.childNodes && document.createElement) { //if (document.styleSheets) { var statustext = document.createTextNode('W3C DOM support'); } else { var statustext = document.createTextNode('no W3C DOM support'); } theStatus.appendChild(statustext); document.getElementById('DOMsupport').appendChild(theStatus);but still I get no output. According to firebug, it hangs on the last line.What am I doing wrong?

[Reg Edit]

Hi, I'm a new member.In order to understand the DOM concept I wrote a small testscript. The idea is to check for browser DOM support and display the textstring "DOM support" or "no DOM support".In my HTML routine I add the tag <div id="DOMsupport"></div>...

Instead of using createTextNode, why not set your div's innerHTML:

document.getElementById('DOMsupport').innerHTML = 'DOM support';

[boen_robot]

DOM support is such a broad term. Why bother testing for it in this way? Why not simply code for all browsers with all methods and properties you need, and fallback to something "generic" for all crappy implementations that have support, but not a good one? Like:

window.onerror = function() {document.getElementById('DOMSupport').innerHTML = 'crappy DOM implementation';}//other code you might want to have

if there's ever any error in your code, the div will get the message "crappy DOM implementation", regardless of the reason. But hey, if you've tailored your code pretty fine, why bother readjusting it for ancient/crappy agents, instead of this sort of fallback?