Building web apps I don't have to worry so much about SEO for back end things so dynamically changing the HTML isn't an issue.
I am using backbone.js with a front end site I'm building and the site is a tour based site, ex several sections within the scroll flow.
So when the page loads, I store the original HTML in a variable origHtml
then set the HTML to change into something like this.$el.find('.section-one').html('<h1>Welcome</h1>');
This is a part of an animation I am working on and then after some animation happens, that block is out of view and I reset that HTML to the original one.
It's not absolutely necessary to do it that way, but I like playing with backbone.js/javascript and am curious if this is a problem. Because I could just create an extra section and hide
/display:none
when appropriate, but I am trying to avoid using hide
/display:none
http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ (an article I read a while back).
I mean this is just experimenting/learning for me what is the optimal way to manipulate HTML for front-end websites?
P.S.: I understand some people may say you need to provide fallbacks for non JavaScript users, and I say no, anyone who does not have a browser that supports JavaScript or does not have JavaScript enabled should not be on my site, plus that demographic is like under 2% (might be wrong) but it's very low.
Additional: If this is bad for SEO I think it would still be okay to use position:absolute
and either set opacity:0
on the element I want hidden, or use margin-right: -9999
or even use display:none
I don't care I just like the JavaScript way but Id like to understand whats best.