jquery-morphdom

A jQuery wrapper for morphdom - a fast and lightweight DOM diffing/patching (without the virtual part)

About Morphdom

Lightweight module for morphing an existing DOM node tree to match a target DOM node tree. It's fast and works with the real DOM no virtual-DOM here!

If you need more information, check the morphdom repo.

Usage

This library can be used to instead of .html or .replaceWith, but keep in mind that this replaces the item itself, not just the inside contents. So it is much more like .replaceWith.

// this is how .html works
$('#somediv').html("<div id=\"newdiv\">I will be inside #somediv</div>");
 
// this is how .replaceWith and .morphdom work
$('#somediv').replaceWith("<div id=\"newdiv\">I will replace #somediv</div>");
$('#somediv').morphdom("<div id=\"newdiv\">I will replace #somediv</div>");

Example

See the example.html for the full use case.

jQuery(document).ready(function ($) {
    // replace #div with #newid
    $('#div').morphdom("<div id=\"newid\">New Text</div>");
 
    // replace the first li with the last one
    $('ul').find('li').first().morphdom($('ul').find('li').last());
 
    // replaces #fetched with the contents of partial.html
    $.get('partial.html', function (data, textStatus, jqXHR) {
        $('#fetched').find('.item').morphdom(data);
    });
});

Usage With Require

Please see this requirebin project.

Use Cases

• loading form data via AJAX
• partial content, replacing other content
• AJAX pagination
• timeout changes to HTML
• updates to DOM for input events
• sortable display of elements