Code convention for jQuery function chaining/nesting

Question

As jQuery devs know, jQuery allows easy dynamic HTML creation like this

var d = $('<div/>')
    .append('some text')
    .append(
        $('<ul/>').append(
            $('<li/>').text('list item')
                      .css("color", "blue")
                      .click(function() {
                          // do something
                      })
        )
    );

What's a good coding convention for creating dynamic HTML like this that can go down an arbitrary number of levels, while still being able to identify where I am in the element hierarchy and can spot if I've closed all the parentheses/braces properly?

Please don't direct me to a templating library.

karim79 · Accepted Answer · 2010-09-08 15:58:01Z

4

Don't forget you can pass a map of properties as the second argument when creating a new element (jQuery 1.4 +):

$("<li/>", {
  text: "list item",
  css: { color: "blue" },
  click: function(){
    // do something
  }
)

See http://api.jquery.com/jQuery/#creating-new-elements

edited Sep 8, 2010 at 15:58

answered Sep 8, 2010 at 15:24

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jerome Over a year ago

How do I append multiple elements then?

Tarun · Accepted Answer · 2012-10-15 10:14:54Z

0

Use templates like Handlebars or EJS to decouple templates from the behavior specific code. Handlebars have an extra added feature, that is to precompile the template and convert it in a minified js. This minified js actually reduces the http calls and loads the page faster.

While in the template, you can add classes or ids to give styling mentioned in common css files.

answered Oct 15, 2012 at 10:14

Tarun

1,11917 silver badges26 bronze badges

1 Comment

Jamiec Over a year ago

Did you miss the bit where the OP asked not to be directed to templating libs? :)

Collectives™ on Stack Overflow

Code convention for jQuery function chaining/nesting

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related