Introduction to morphdom

morphdom is a fast and lightweight library for morphing DOM elements in-place, helping to update and patch changes in your web application effortlessly. By using morphdom, you can improve user experience and performance by optimizing DOM updates.

Basic Usage

  
    const morphdom = require('morphdom');
    const fromNode = document.getElementById('source');
    const toNode = document.getElementById('target');

    morphdom(fromNode, toNode.innerHTML);
  

Preserve State

  
    const morphdom = require('morphdom');
    const fromNode = document.getElementById('source');
    const toNode = document.getElementById('target');

    morphdom(fromNode, toNode.innerHTML, {
      onBeforeElUpdate: (fromEl, toEl) => {
        if (fromEl.isEqualNode(toEl)) {
          return false;
        }
      }
    });
  

Reuse Existing DOM Elements

  
    const morphdom = require('morphdom');
    const fromNode = document.getElementById('source');
    const toNode = document.getElementById('target');

    morphdom(fromNode, toNode.innerHTML, {
      getNodeKey: el => el.id
    });
  

Handling Special Attributes

  
    const morphdom = require('morphdom');
    const fromNode = document.getElementById('source');
    const toNode = document.getElementById('target');

    morphdom(fromNode, toNode.innerHTML, {
      onBeforeElUpdated: (fromEl, toEl) => {
        if (toEl.nodeName === 'INPUT' && toEl.type === 'text') {
          toEl.value = fromEl.value;
        }
      }
    });
  

Complete Example

  
    
    
    
      
      
      
      
    
    
      

        

          
Item 1
          
Item 2
        
      

      

        

          
Updated Item 1
          
Item 2
          
Item 3
        
      

      Update DOM

      
    
    
  

With these examples, you can start using morphdom to optimize your web application. morphdom allows you to preserve elements, handle special attributes, and reuse existing DOM elements effectively.

Have fun coding with morphdom!

Hash: 3ca1d14cf147e505aa1aa2d5b344831cb4f27a24140de0107b25a8a6ef89c9e0