Awesome Open Source
Awesome Open Source

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
Alternatives To Jquery Morphdom
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,060,209
Jquery (26,477
Dom (10,540
Ajax (7,698
Diff (5,170
Form Data (879