jQuery Coding Standards (2) – DOM Manipulation

Synopsis

Manipulation of the Document Object Model (DOM) can be costly and inefficient, regardless of whether it is undertaken through jQuery or JavaScript.

The API provided by jQuery facilitates greater DOM manipulation, possibility outwith of the awareness of the developer.

Therefore, you should limit the amount of code that performs DOM Manipulation tasks.

Description

The challenge here is to recognise:

  1. When DOM Manipulation is being undertaken
  2. When it is being done in excess.

Both of these are open to interpretation as it is difficult to stipulate exactly what constitutes excessive DOM manipulation.

In general, very little DOM manipulation should really be undertaken. You should be hitting the DOM in this way only when is absolutely necessary.

Let us examine the following example:

var $myList = $("#myList");   

for (i=0; i<1000; i++){
    $myList.append("This is list item " + i);
}

This code adds 1000 lines to an HTML list. This is done with 1000 successive calls to the .append() method, and hence, 1000 manipulations to the DOM.

The following code, modified from the example above demonstrates how this can be made more efficient:

var $myList = $("#myList");
var li = "";   

for (i=0; i<1000; i++){
    li += "<li>This is list item " + i + "</li>";
}  

$myList.append(li);

In this example, the HTML is constructed in advance. The HTML is appended in one call, greatly reducing the amount of manipulation you undertake.

jQuery Coding Standards Menu

  1. jQuery Variables
  2. DOM Manipulation
  3. Events
  4. Page Style and Layout Changes
  5. Effects and Animation
  6. Selectors
  7. Plugins
  8. Chaining

9 thoughts on “jQuery Coding Standards (2) – DOM Manipulation

  1. So, make that last correction as:

    $myList.append(“<li>This is list item ” + i + “<li>”);

    • Scott, thank you so much for your comments. This was actually written when I was using an older theme, which probably handled it ok. I’ve now updated the post to have the correct markup and syntax highlight.

  2. After making my post, I see the problem. This blog is not setup to escape markup using HTML entities and the < and > that are entered are being stripped out completely.

    You should be scrubbing this form input and replacing the markup with entities.

  3. Your code example at the top is incorrect:

    var $myList = $(“#myList”);

    for (i=0; i<1000; i++){
    $myList.append("This is list item " + i);
    }

    Should be:

    var $myList = $("#myList");

    for (i=0; i<1000; i++){
    $myList.append("This is list item ” + i + “”);

    The jQuery .append() method will not generate new list items just because you are appending to a list.
    }

  4. Pingback: jQuery Coding Standards (3) – Events | James Wiseman

  5. Pingback: “I Don’t Think jQuery Should Be Constrained By Standards” | James Wiseman

  6. Pingback: jQuery Coding Standards (2) – DOM Manipulation | James Wiseman | Source code bank

  7. Pingback: jQuery Coding Standards and Best Practice « James Wiseman

Leave a Reply