Yeah, JS is a scripting language and not a programming language, whatever. Anyway, I've got a page where the script does the following a couple of times:
var i = document.createElement('div');
i.innerHTML = 'some text';
i.class = 'some CSS class';
document.getElementById('element already in the page').appendChild(i);
Name:
Anonymous2006-06-12 13:55
Write yourself a function that does what you want, son. It's called abstraction.
What makes you think you're not looking at the inside of a function?
function dothisonload() {
for (i to whatever) {gomakeanelement(arguments)};
}
//buncha other functions that act on user input
Name:
Anonymous2006-06-12 14:23
>>1 Since you are using the IE DOM.
Learn how to use i.insertAdjacentHTML() and i.style
Also, pick up the JavaScript pocket reference by O'Reilly so you don't need to ask questions.
Name:
Anonymous2006-06-12 14:54
>>4
use document.createTextNode and i.styleName to get cross-browser compliance
I'm not >>1-7
JavaScript is a really frustrating language to work with. First, things seem to work (or more often, not work) by art of magic. Second, you get almost no input in what went wrong. Sometimes your browser goes DO NOT WANT and at best you'll have the JavaScript console. Third, there are n different versions of JavaScript where n is the number of browsers supposedly supporting JavaScript ever released; all of which are different in very subtle ways that make everything fail for one reason or another; and if you want cross-browser compatibility, you have to code everything a number of times, and your script ends up being made of hack and dirty.
sinced nobody answered >>1
the problem is that 'className' is the attribute you want to use for CSS classes. 'class' is not mapped to the html attribute, for retarded reasons (is it a keyword? javascript doesn't fucking have classes!)
Name:
Anonymous2006-06-13 9:27
>>8
Actually, what causes most of the first, part of the second and all of the third issues is the DOM. The DOM sucks, it's shitty and counter-intuitive. Doing the simplest things with DOM is complicated and has an amazing number of gotchas and side effects. The guys who came up with it need to be punched in the face. I'm sure they never used it to realize how poor a design it is. For example, try finding out the absolute position of an object. You have to write your own function for it and scan the whole tree upwards because all you're given is offsetLeft/Top and offsetParent. This, combined with poorly compilant browsers and flawed rendering engines full of catches and gotchas, makes the whole thing a trial-and-error, write-multiple-times hell
Name:
Anonymous2006-06-13 10:05
>>10
>javascript doesn't fucking have classes
Yes it does. They're just really not worth it.
Name:
Anonymous2006-06-13 15:16
You just create a prototype or a factory function, big deal. Prototypes are actually nice in the sense they require less abstraction providing the same functionality. The problem is they are probably harder to document and definitely harder to maintain.
i dunno, i like javascript being a prototype-based language. it provides a really simple system compared to traditional OO. with prototypes, you can implement classic OO, or variations to suit your taste. i'm not convinced it is harder to maintain.
so >>6 and >>10 are right, you need className, not class.
btw, now that you know how to write it, you might want some helper functions, because constructing stuff via DOM is annoyingly verbose.
i use something like
function create(o, t){
if (o == 'text') return document.createTextNode(t||'')
else {
var e = document.createElement(o)
if (t) {
if (typeof t == 'string') e.innerHTML = t
else niceExtend(e, t)
}
return e
}}
function niceExtend(dest, src){
if(!src) return dest
if(src.html) { dest.innerHTML = src.html; delete src.html }
if(src.css) { dest.className = src.css; delete src.css }
if(src.style) {
var d = dest.style, s = src.style
for(var k in s) d[k] = s[k]
delete src.style
}
for(var k in src) dest[k] = src[k]
return dest
}