Page is a not externally linkable
astupidname - 10:57 am on Oct 22, 2010 (gmt 0)
Frameworks are extremely useful IF you TRULY understand what you're doing with them and how they work. This does come down to personal preference, willingness to learn the in's and out's of the framework, and when trying to do more advanced things the degree to which you grasp the core language (javascript) and OOP or programming in general. My personal preference is to code my own.
innerHTML is totally reliable and is used by many of the top JavaScript frameworks. Claiming that it's junk and unreliable is, quite frankly, totally wrong.
Can you provide an example?
I disagree that it's totally reliable, and agree that it's not "junk" -when used properly (as in, if it works during testing, great! if not, go directly to DOM methods). I ran in to it with something someone on another forum had trouble with and I struggled to understand why at first also (well, I still don't totally understand why), but helped resolve by using DOM methods. I'll give you a cleaned up example of it here, this will work in Internet Exploder, but not in other browsers such as Firefox, Chrome or Safari (windows), the alerts will not contain the 'foo' properties value from any of the elements added except the last one:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Some Title</title>
<script type="text/javascript">
function findObjectProperty(objectId, propertyName){
var el = document.getElementById(objectId);
alert(objectId +'.'+ propertyName +' = '+ el[propertyName]);
}
function add_element(parentId, newElementId){
//naughty stuff here, adding an element via innerHTML,
//then later setting a custom user-defined property on the element.
document.getElementById(parentId).innerHTML += '<div id="'+ newElementId +'" class="newElement"></div>';
var div = document.getElementById(newElementId);
div.foo = "bar";
div.innerHTML = 'This is '+ div.id +', this.foo = '+ div.foo; //accessing div.foo here works fine
}
window.onload = function(){
add_element("container", 'element_1');
add_element("container", 'element_2');
add_element("container", 'element_3');
add_element("container", 'element_4');
findObjectProperty('element_1', 'foo'); //"undefined"
findObjectProperty('element_2', 'foo'); //"undefined"
findObjectProperty('element_3', 'foo'); //"undefined"
//odd thing is, no matter how many elements you add, only the last ones 'foo' property will be found
//correctly in the alerts from findObjectProperty.
//Problem does not exist with default properties such as id or className or even innerHTML for example.
findObjectProperty('element_4', 'foo'); //"bar"
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
If anybody's wondering, how to post formatted code on webmasterworld [webmasterworld.com]
Do not copy formatted code on webmasterworld from IE, use other browser such as Firefox.
In addition to the fact the problem only occurs when adding the element via innerHTML, the above is yet another reason for not extending html elements with custom properties I guess, which incidentally many frameworks do. Strange that only the last added element's foo is found in the alerts. Behaves almost as if a "closure" issue, but you can see by the coding pattern there is nothing that should introduce such closure issue. I'm just taking a wild guess here but could be some sort of stack trace error.
The cure is to change the add_element function to use createElement instead:
function add_element(parentId, newElementId){
var newEl = document.createElement('div');
document.getElementById(parentId).appendChild(newEl);
newEl.className = 'newElement';
newEl.id = newElementId;
newEl.foo = 'bar';
newEl.appendChild(document.createTextNode('This is '+ newElementId +', this.foo = '+ newEl.foo));
}
Well, just thought I'd share that oddity. If anyone can explain it I'd love to hear it.