javascriptjqueryappendcreateelementjquery-append

The preferred way of creating a new element with jQuery

I've got 2 ways I can create a <div> using jQuery.

Either:

var div = $("<div></div>");
$("#box").append(div);

Or:

$("#box").append("<div></div>");

What are the drawbacks of using second way other than re-usability?

Solution

  • The first option gives you more flexibilty:

    var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);

    And of course .html('*') overrides the content while .append('*') doesn't, but I guess, this wasn't your question.

    Another good practice is prefixing your jQuery variables with $:
    Is there any specific reason behind using $ with variable in jQuery

    Placing quotes around the "class" property name will make it more compatible with less flexible browsers.