On Sun, Feb 6, 2011 at 8:12 AM, Miller Medeiros
<[email protected]> wrote:
> I'm currently working on a very specific kind of project right now where
> accessibility and SEO aren't a concern and the amount of markup required is
> minimal, since most of the content are images and/or videos... all the
> content should be loaded dynamically and the whole application lives in a
> single page...
>
> I started the project using markup for everything (stored in separate files
> and parsed with a template library) and using `innerHTML` to replace the
> content/estate of my application but after a couple days of development I
> started to migrate most of my code to pure DOM, creating most of the
> elements using `document.createElement`...
>
> for my specific case `document.createElement` seems a better approach since
> I can cache a reference to the created elements (and delete it later after
> switching content) instead of having to query for them again every time I
> append something to the innerHTML of the parentNode.. (which would make the
> cached reference point to the wrong element)
>
> Anyone has any thoughts about that? similar experiences? which one should be
> favored?
>
By creating elements using DOM methods you are doing it correctly. If
you can completely avoid using ".innerHTML" property you also
potentially avoid known problems with it.
Using DOM methods and caching/cloning elements you could build long
and very complex structures with no performance penalties.
Remember that using ".innerHTML" you are potentially swapping away
handlers and duplicating elements.
In the past :) the worst usage I gave to ".innerHTML" for logging
stuff in my tests was:
function log(m) {
document.body.innerHTML += '<div>' + m + '</div>';
}
Notice the '+=' and think about the consequences ...
The equivalent one, not so risky, is:
function log(m) {
var d = document;
d.body.appendChild(
d.createElement('div')
).appendChild(d.createTextNode(m));
}
a better testing environment now.
--
Diego
> PS: the app is only target for iPad, Chrome and Safari.
> PS2: the project reminds a little bit this website:
> http://www.wrangler-europe.com/wrangler/ - since I have a fullscreen
> interactive video as well and almost no copy.
> PS3: I'm not using any library like jQuery/mootools/dojo/YUI...
>
> --
> To view archived discussions from the original JSMentors Mailman list:
> http://www.mail-archive.com/[email protected]/
>
> To search via a non-Google archive, visit here:
> http://www.mail-archive.com/[email protected]/
>
> To unsubscribe from this group, send email to
> [email protected]
>
--
To view archived discussions from the original JSMentors Mailman list:
http://www.mail-archive.com/[email protected]/
To search via a non-Google archive, visit here:
http://www.mail-archive.com/[email protected]/
To unsubscribe from this group, send email to
[email protected]
