https://github.com/james2doyle/jquery-morphdom
A jQuery wrapper for morphdom - a fast and lightweight DOM diffing/patching (without the virtual part)
https://github.com/james2doyle/jquery-morphdom
Last synced: about 1 year ago
JSON representation
A jQuery wrapper for morphdom - a fast and lightweight DOM diffing/patching (without the virtual part)
- Host: GitHub
- URL: https://github.com/james2doyle/jquery-morphdom
- Owner: james2doyle
- License: mit
- Created: 2016-02-29T14:50:48.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-09-21T18:25:37.000Z (over 9 years ago)
- Last Synced: 2025-04-23T23:39:12.105Z (about 1 year ago)
- Language: JavaScript
- Size: 16.6 KB
- Stars: 6
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jquery-morphdom
A jQuery wrapper for [morphdom](https://github.com/patrick-steele-idem/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](https://github.com/patrick-steele-idem/morphdom/#morphdom).
### 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`.
```js
// this is how .html works
$('#somediv').html("
I will be inside #somediv");
// this is how .replaceWith and .morphdom work
$('#somediv').replaceWith("
I will replace #somediv");
$('#somediv').morphdom("I will replace #somediv");
```
### Example
See the [example.html](https://github.com/james2doyle/jquery-morphdom/blob/master/example.html) for the full use case.
```js
jQuery(document).ready(function ($) {
// replace #div with #newid
$('#div').morphdom("
New Text");
// 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](http://requirebin.com/?gist=9e417680ef14abd2a3c379cd366a8eed).
### 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