innerHtml to DOM javascript Continued

Javascript Best Practices

Continued article from "Break Your InnerHtml Addiction", more functions to replace innerHml with javascript DOM methods


Date : 2009-06-03
Ok, picking up where we left off (from http://www.bestcodingpractices.com/break_your_innerhtml_addiction-2719.html ), lets look at some more innerHtml replacement functions using pure DOM methods.

This next one has been a bit of trouble. I've tested it on IE7 and FF3 with various levels of success. Both browsers add a tbody tag into tables, which is fun.
IE won't give me the content of script tags in the nodeValue parameter although you can get it in the innerHTML parameter (not that anyone would do that of course)
Code:
function DOMgetHTML(el) {
  if (el.nodeType == 3) {       // Handle Text nodes
    return el.nodeValue;
  } else if (el.nodeType == 8) { // Handle Comments correctly
    return '<!--' + el.nodeValue + '-->';
  } else {
    var txt = new Array();
    var i=0;
    txt[txt.length] = '<' + el.tagName;   // Start creating tag
    if (el.attributes)
    {
      for (a=0;a<el.attributes.length;a++) {  // Add Attributes
        if (el.attributes[a].specified) {     // But only user Specified ones
          txt[txt.length] = ' ' + el.attributes[a].nodeName + '="' + el.attributes[a].nodeValue + '"';
        }
      }
    }
    if (el.childNodes.length > 0)
    {
      txt[txt.length] = '>';
      while(el.childNodes[i]) {
        txt[txt.length] =  DOMgetHTML(el.childNodes[i]);
        i++;
      }
      txt[txt.length] =  '</' + el.tagName + '>';
    } else {
      txt[txt.length] =  '/>';
    }
  }
  return txt.join('');
}


As wrong as it is to view any part of a DOM as a text string this function will allow you to do just that. I've tested it a lot and run across the mentioned caveats but please let me know if you find any others.

Next we may need to clear the content of an element. Using innerHTML this would be as simple as assigning a blank string to an elements innerHTML. Itís not much more complicate with DOM:

Code:
function clearContent(el) {
  // first clone the object, without itís child elements.
  nEl = el.cloneNode(false);
  // Pop the new element in before the old one.
  el.parentNode.insertBefore(nEl,el);
  // Now get rid of the one that has all that icky content
  el.parentNode.removeChild(el);
}
clearContent(document.getElementById("myDiv"));


This function would be used when removing content from a page. It makes so much more sense to empty a node as opposed to assigning a blank string to it.

Sometimes we need to copy one node to another. This can be used for sorting, mirroring, or any other method that requires moving data around your document.

Code:
function copyNode(source, dest) {
  // Get source content
  sEl = document.getElementById(source).cloneNode(true);
  // remove your destination existing content
  clearContent(document.getElementById(dest);
  // add source content onto dest content
  document.getElementById(dest).appendChild(sEl);
}

Notice this function makes use of the previous one. First we copy the data we want, then we remove the data we donít want, then we copy the source data to the destination.

Now you are armed to work more effectively with the DOM structure. Embrace the standard. Don't use shortcuts they are evil.

Comments :

No comments yet
  • Search For Articles