JSFiddle - React, Tailwind, and code Playground

by Mohamed Rias

HTML

<div id="id1">
    
</div>

CSS

ul li {
    background: red;
}

ul li ul li {
    background: white;
}

JavaScript

var string = '<ul class="hello" id="hello" ><li><a href="#">India</a><ul >                <li ><a href="#"> States</a></li>                    <li><a href="#">WB</a>                    <ul >                        <li ><a href="#">Kolkata</a></li>                        <li><a href="#">Silliguri</a></li>                        <li><a href="#">Kolkata</a>                            <ul>                                <li><a href="#">Park Street</a>                                    <ul>                                        <li><a href="#">BMW Showroom</a></li>                                                                               <li><a href="#">City center</a>                                            <ul>                                                <li><a href="#">KFC</a></li>                                                <li><a href="#">pizzaHut</a></li>                                            </ul>                                        </li>                                    </ul>                                </li>                            </ul>                        </li>                    </ul>                </li>            </ul>        </li>';

function fn()
   {
      var defer = $.Deferred();
      abc = string;
      var timer = setInterval(function() {
          if(abc) {
            clearInterval(timer);
            defer.resolve(abc);
          }
      }, 100);
      return defer.promise();

  }

fn().then(function(abc) {
    $("#id1").html(abc);
})