How to generate UL Li list from string array using jquery

Question

I have string array like       United States    Canada    Argentina    Armenia    Aruba      Australia    Austria    Azerbaijan    Bahamas    Bangladesh      Belarus    Belgium         etc    I want create a dynamic list from string array like below -   lt ul class  mylist  style  z-index  1  top  474px  left  228px  display  none  width  324px    gt      lt li class  ui-menu-item  role  menuitem  gt        lt a class  ui-all  tabindex  -1  gt           United States      lt  a gt     lt  li gt     lt li class  ui-menu-item  role  menuitem  gt        lt a class  ui-all  tabindex  -1  gt           Canada      lt  a gt     lt  li gt     lt li gt        lt  li gt            lt  ul gt    How is it possible using jQuery

User · Answer

It s possible without jQuery too       x000D   x000D  let countries     United States    Canada    Argentina    Armenia    Aruba    x000D   x000D     The  lt ul gt  that we will add  lt li gt  elements to  x000D  let myList   document querySelector  ul mylist    x000D   x000D     Loop over the Array of country names  x000D  countries forEach function value  index  array    x000D       Create an  lt li gt  element  x000D    let li   document createElement  li    x000D   x000D       Give it the desired classes  amp  attributes  x000D    li classList add  ui-menu-item    x000D    li setAttribute  role    menuitem    x000D   x000D       Now create an  lt a gt  element  x000D    let a   document createElement  a    x000D   x000D       Give it the desired classes  amp  attributes  x000D    a classList add  ui-all    x000D    a tabIndex   -1  x000D    a innerText   value       lt --- the country name from our Array x000D    a href       x000D   x000D       Now add the  lt a gt  to the  lt li gt   and add the  lt li gt  to the  lt ul gt  x000D    li appendChild a   x000D    myList appendChild li   x000D      x000D   lt ul class  mylist  gt  lt  ul gt  x000D   x000D   x000D

User · Answer

Even better approach using array s join method  var countries     United States    Canada    Argentina    Armenia    var list     lt ul class  myList  gt  lt li class  ui-menu-item  role  menuitem  gt  lt a class  ui-all  tabindex  -1  gt     countries join   lt  a gt  lt  li gt  lt li gt        lt  li gt  lt  ul gt

User · Answer

Other variation of Abhishek Bhalani  You can use Array map   instead of   each    var items     United States    Canada    Argentina    Armenia    var cList      ul mylist    items map   item i     gt          var li       lt li  gt             addClass  ui-menu-item            attr  role    menuitem            appendTo cList             lt a class  ui-all  gt    i          item name     lt a  gt             appendTo li

User · Answer

var countries     United States    Canada    Argentina    Armenia    var cList      ul mylist     each countries  function i        var li       lt li  gt             addClass  ui-menu-item            attr  role    menuitem            appendTo cList       var a       lt a  gt             addClass  ui-all            text  this            appendTo li

User · Answer

With ES6 you can write this  const countries     United States    Canada    Argentina    Armenia     const  ul       lt ul gt      class   quot mylist quot     append    countries map country   gt          quot  lt li gt  quot   append    quot  lt a gt  quot   text country

User · Answer

lt script type  text javascript   gt          function aa                         var YourArray     United States    Canada    Argentina    Armenia                var ObjUl       lt ul gt  lt  ul gt                 for  i   0  i  lt  YourArray length  i                                  var Objli       lt li gt  lt  li gt                     var Obja       lt a gt  lt  a gt                      ObjUl addClass  ui-menu-item                    ObjUl attr  role    menuitem                     Obja addClass  ui-all                    Obja attr  tabindex    -1                     Obja text YourArray i                    Objli append Obja                    ObjUl append Objli                                 DivSai   append ObjUl                  lt  script gt   lt  head gt   lt body onload  aa    gt       lt form id  form1  runat  server  gt       lt div class  DivSai   gt        lt  div gt       lt  form gt   lt  body gt

User · Answer

var countries     United States    Canada    Argentina    Armenia    var cList      ul mylist     each countries  function i        var li       lt li  gt             addClass  ui-menu-item            attr  role    menuitem            appendTo cList       var aaa       lt a  gt             addClass  ui-all            text countries i            appendTo li

[jquery] How to generate UL Li list from string array using jquery?

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-selectors

Examples related to javascript-framework