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