Working with HTML Fragments in jQuery

When you are working in jQuery with generated HTML fragments that are returned from AJAX, It is interesting to note these cases..

1) Creating New elements on The Fly

When passing HTML string to jQuery( html ) it will look for HTML tags (ex: <tag ... >) somewhere within the string. Then, it attempts to create new DOM elements as described by the HTML string.

But, be ware of that: in complex HTML strings, some browsers may not generate a DOM that replicates the HTML you provided especially for not well-formed snippets.

Solution, is really simple. First, create a new container div and set its inner HTML with the snippet string then append it to the target element.
$(document).ready(function(){
   // not-well-formed HTML string
   var str = '1<br>2<br>3';

   // Bad: creating new elements
   $(str).appendTo('#output1');

   // Good: using inner HTML
   $('<div/>').html(str).appendTo('#output2');
});

2) Having Images or Iframes in fragments

When you intend to filter out some parts of the HTML snippet before appending it to the DOM, you should note that the web browser will immediately request any images or iframes or scripts it finds in that snippet and certainly slowing down your page loading.
* you can inspect what resources are loaded on web pages using Firebug for FireFox or built-in developer tools in Chrome.

Solution, is to rename the [src] attribute of the img or iframe tags as [tempsrc] using regular-expressions to prevent browser from loading them. Then, when you are finished with filtering out unneeded parts, you can revert it back as it was..

To revert [src] attributes back, you have 2 options:

1. Using regular expressions again.
2. After appending the fragment string to a container, you can loop each image/iframe tag using jQuery selectors to revert its [src] attribute as is.

$(document).ready(function(){
   // not-well-formed HTML string
   var str = '1<br>2<br>3<br>'+
            '<img src = [url]>';

   // replace src attributes to tempsrc
   str = str.replace( /\ssrc\s*=/gi , ' tempsrc=' );

   // some manipulations here..

   // **************************** Option 1
   // revert src attributes as is with regex
   str = str.replace( /\stempsrc=/gi , ' src=' );

   // append fragment
   $('<div/>').html(str).appendTo('#output1');

   // **************************** Option 2
   // revert src with jquery after appending the fragment
   var div = $('<div/>').html(str).appendTo('#output2');

   // loop any image, iframe tags to revert src
   $('img,iframe' , div).each(function(){
      var tag = $(this);
      tag.attr('src' , tag.attr('tempsrc'));
   });
});

Tags: AJAX , javascript , jQuery , jQuery Tutorial , Regular expressions , Tutorials