Js Array to div

 
 <script type="text/javascript">
    $( function() {

         var data = [
                      {id:1,  title:"Contacts",   url:"http://page.html",    ico:"⚠" },
                      {id:2,  title:"contracts",  url:"http://page.html",    ico:"🎁"},
                      {id:3,  title:"Dictionary", url:"http://page.html",    ico:"👍"},
                      {id:4,  title:"Orders",     url:"http://page.html",    ico:"🎶"},
                      {id:5,  title:"Reports",    url:"http://page.html",    ico:"😊"},
                      {id:6,  title:"Setting",    url:"http://page.html",    ico:"🎭"},
                      {id:7,  title:"Prints",     url:"http://page.html",    ico:"🧶"},
                      {id:8,  title:"Users",      url:"http://page.html",    ico:"✨"},
                      {id:9,  title:"Units",      url:"http://page.html",    ico:"🎗"},
                      {id:10, title:"System",     url:"http://page.html",    ico:"🎨"},
                      {id:11, title:"Notif",      url:"http://page.html",    ico:"👓"},
                      {id:12, title:"Remark",     url:"http://page.html",    ico:"🧵"},
          ]    

         var dt = {
                   title:"from",
                   dat: data,
         }

             console.log(dt.title)
             console.log(dt.dat[0])

            var myList = $("#myList");

            if (data.length) {
                $.each(data, function(index, item) {
                       console.log(item.title)
                    // myList.append(`<li val="${item.id}">${item.ico} ${item.title} [${item.id}] </li>`);
                       myList.append(Thm(item))
                });
            } else {
                    console.error("UL element not found.");
            }
			
			$("#btn01").one("click", function() {
                 alert("One click")
			})
            
        	
			$("#btn02").one("click", function() {
                 Addelement()
			})
            		
			
        })


        function Thm(o) {
              var r = `<li val="${o.id}"> <a href="${o.url}">${o.ico} ${o.title} [${o.id}]</a> </li>`
              return r
        }
		
		function Addelement(){
		  var sl = $("#sel01")
		  var gr1     = "<optgroup label='Yabloko'>"
		  var gr1_end = "</optgroup>"
		  var grp 
		  
    		var info = [
              {info_name: 'Фрукты и овощи'},
			  {info_name: 'Йогурты и кефир'},
			  {info_name: 'Яблоки и овощи'},
              {info_name: 'Молоко и кефир'}
            ];

		  
		    var optgroup = "<optgroup label='Питание группы'>";
			for (var i = 0; i < info.length; i++) {
				name      = info[i].info_name;
				optgroup += "<option value='" + name + "'>" + name + "</option>"
			}
			optgroup += "</optgroup>"



		  sl.append("<optgroup label='🎆 Тыква'> <option>Груша 3</option><option>Test node 4</option><option>Test node 5</option> </optgroup>")
		  sl.append("<optgroup label='🎟 Груша'> <option>Груша 3</option><option>Test node 4</option><option>Test node 5</option> </optgroup>")
		  
		  grp=gr1 +"<option>Test node 31</option>" + "<option>Test node 42</option>" + "<option>Test node 53</option>" + gr1_end 
	      
		  sl.append(grp)
		  
		  grp = "<optgroup label='Запеканка тестовая'> <option>Груша 3</option><option>Test node 4</option><option>Test node 5</option> </optgroup>" 
		  
		  sl.append(grp)
		  		  sl.append(optgroup)
		}
  </script>