[jQuery] Really Ugly?

[jQuery] Really Ugly?

<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; "><BLOCKQUOTE type="cite"></BLOCKQUOTE><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Hello my jQuery friends,</DIV><DIV><DIV><BR class="khtml-block-placeholder"></DIV></DIV>I received a comment on learningjquery.com this evening from someone who had a grievance with part of some example code. I was wondering if any of you would be willing to shed some light on this for me. I think what he's getting at is the whole "innerHTML is evil" thing, but since he doesn't really explain why he think it's "really ugly," I'm just not sure. <DIV><BR class="khtml-block-placeholder"></DIV><DIV>Here is the relevant snippet of his comment:  <DIV><BR><BLOCKQUOTE type="cite"><P style="margin-top: 0px; margin-right: 0px; margin-bottom: 11px; margin-left: 0px; "><SPAN class="Apple-style-span" style="line-height: 16px;"><FONT class="Apple-style-span" color="#101010" face="Verdana" size="3"><SPAN class="Apple-style-span" style="font-size: 11px; line-height: normal;">Nice post, but …</SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Verdana" size="3"><SPAN class="Apple-style-span" style="font-size: 11px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Verdana" size="3"><SPAN class="Apple-style-span" style="font-size: 11px; line-height: normal;"> This part of code :</SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Verdana" size="3"><SPAN class="Apple-style-span" style="font-size: 11px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"> $('#show-alert').click(function() {</SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"> $('<div class="quick-alert">Alert! Watch me before it\'s too late!</div>') .insertAfter( $(this) );</SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"> }</SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Verdana" size="3"><SPAN class="Apple-style-span" style="font-size: 11px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Verdana" size="3"><SPAN class="Apple-style-span" style="font-size: 11px; line-height: normal;"> should be AVOIDED as is. Inserting HTML code like this is really ugly, it’s a lot better to use the DOM methods :</SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Verdana" size="3"><SPAN class="Apple-style-span" style="font-size: 11px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"> $('#show-alert').click(function() {</SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"> var oDIV = document.createElement('div');</SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"> oDiv.className = 'quick-alert';</SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"> oText = document.createTextNode("Alert ! Watch me before it's too late !");</SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"> $(oDiv).append(oText);</SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"> $(oDiv).insertAfter(this);</SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"><BR></SPAN></FONT><FONT class="Apple-style-span" color="#101010" face="Monaco" size="2"><SPAN class="Apple-style-span" style="font-size: 10px; line-height: normal;"> }</SPAN></FONT></SPAN></P></BLOCKQUOTE><DIV>I'd love to hear your opinions about this. With HTML/CSS stuff, I'm obsessed with standards and such. And one of the things that has always really attracted me to jQuery is its unobtrusiveness. I also read Jeremy Keith's DOM Scripting book and really appreciated his approach -- which is similar to what this commenter is suggesting. But I also love the super-fast development that can be done with jQuery and don't want to have to give that up if it's just a matter of someone's aesthetic sensibility being offended. I guess I just want to do the right thing. </DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>thanks,</DIV><BR><DIV><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR></DIV></DIV></BODY></HTML>_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/