JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<link rel="stylesheet" href="https://howdoweb.com/themes/blocks-v1/css/style.css">
<div id="el1" class="page-editor-block navigation-wrapper app-dragdocksort-item" data-id="block-084759b2-cf4a-41d5-9d0b-8754f6c36c62" plugins="keen-slider" style="" data-block-type="article_list" data-block-id="clean" data-depth="5" data-path="[0,0,1,1,2]" data-tags="[&quot;page-builder-item&quot;,&quot;page-builder-loose-item&quot;]" data-can-undock="false">
        <div class="page-editor-child blog-grids row keen-slider" data-id="block-084759b2-cf4a-41d5-9d0b-8754f6c36c62">
        
        <div data-id="0" class="basic-col basic-col-4 keen-slider__slide">
                    <div class="grid ard">
                        <div class="card-img-top entry-media">
                            <img src="https://howdoweb.com/resize/landscapethumb/local/howdoweb.com/uploads/images/2021/4/1619268981495_hashtags_1500x1500.jpg" alt=""> <!--http://csshint.com/wp-content/uploads/2018/04/button-effect-6-810x612.jpg-->
                        </div>
                        <div class="card-body">
                            <span class="badge color-primary" data-help="poop">Help</span> 
                            <a href="/editor/38?"><h5 class="card-title">Tags</h5></a>
                            <p>How to add, edit and delete categories, sub categories and hashtags</p>
                            <div class="read-more-date">
                                <a href="/editor/38?">Read More..</a>
                                <span class="date">3 Hours ago</span>
                                <span class="date">3 Hours ago</span>
                            </div>
                        </div>
                    </div>
                </div><div data-id="1" class="basic-col basic-col-4 keen-slider__slide" data-poop="hey">
                    <div class="grid ard">
                        <div class="card-img-top entry-media">
                            <img...

JavaScript

const deepHTMLDiff = function (origEls, newEls, maxDepth=6, depth=0) {
	
  //origEls = Array.from(origEls);
  const origLen = origEls.length;
  const newLen = newEls.length;
  
  //Remove nodes if original has too many nodes...
  if (origLen > newLen) {
      
    	for (let i=origLen,l=newLen+1; i > l; i--) {
        //console.log('removing', i);
        origEls[i-1].remove();
      }
    }
    
    
    for (let i = 0, l = origEls.length; i < l; i++) {
        const el = origEls[i];
        const newEl = newEls[i];
        
        if (!newEl) continue; //Todo: not sure why cause both should be same length
        
        if (el.isEqualNode(newEl)) continue; //Skip if nodes are equal
        
        //if maximum depth reached, just replace innerHTML
        if (depth > maxDepth) {
        	el.innerHTML = newEl.innerHTML;
          continue;
        }
        
        if (el.tagName !== newEl.tagName) {
        	//console.log('different tagname', el.tagName, newEl.tagName, newEl);
          const newTagEl = document.createElement(newEl.tagName);
          el.replaceWith(newTagEl);
          //el.tagName = newEl.tagName;
        }
        
        if (el.nodeType === Node.TEXT_NODE) {
        
            el.nodeValue = newEl.nodeValue;
					
        } else if (el.nodeType === Node.ELEMENT_NODE) {
        		
            //If element, copy attributes (but only those that have changed!)
            const oldAttrs = Array.from(el.attributes);
            const attrs = Array.from(newEl.attributes);
            const oldAttrsMap = {};
            const attrsMap = {};

            for (let i=0, l=oldAttrs.length; i < l; i++) {
              oldAttrsMap[oldAttrs[i].name] = oldAttrs[i].value;
            }

            for (let i=0, l=attrs.length; i < l; i++) {
              attrsMap[attrs[i].name] = attrs[i].value;
            }
            
            for (const key in attrsMap) {
            		//If key does not exist in old, or value is different
                if...