Re: Really Ugly?

Karl Swedberg-2 wrote:

Here is the relevant snippet of his comment:

> Nice post, but …  it’s a lot better to use the DOM methods :
>
> $('#show-alert').click(function() {
> var oDIV = document.createElement('div');
> oDiv.className = 'quick-alert';
> oText = document.createTextNode("Alert ! Watch me before it's too  
> late !");
> $(oDiv).append(oText);
> $(oDiv).insertAfter(this);
> }

That kind of defeats the terseness of jQuery. If you're set on avoiding any use of .innerHTML just use one of the jQuery DOM plugins. Then you can say something like this and it will only use DOM functions:

$('#show-alert').click(function() {
   $(this).after(
      $.DIV({className: 'quick-alert'},
      "Alert ! Watch me before it's too late !")
    );
};

I *do* think that people need to be more careful when using an innerHTML approach to building content, maybe that's what the OP was trying to get at. For example, let's say you do something like this:

$("#myinput").bind("change", function(){
  $("#youtyped").html(this.value);
});

Whatever the user enters in the input field will be copied to the element, but what if the user enters html? That could cause some serious havoc with your document. (Starting with jQuery 1.1 the .text() method is a setter, but at the moment it just sends the input to .html() which wouldn't fix this problem.)

If you use DOM creation functions, there's no html interpretation of the data and therefore no potential for screwups. But a lot of the time you're not processing user data and it is very handy to drop in a quick scrap or two of html.