Display all items in array using jquery

Question

I have an array that I want to have displayed in html   I don t want to write multiple lines for posting each item in the array but all should be exactly the same  ie  var array         code that fills the array       element   html   lt span gt   array   lt  span gt       what I want here is to create a span for each item in the array

User · Answer

here is solution  i  create a text field to dynamic add new items in array  my html code is    x000D   x000D    lt input type  text  id  name  gt  x000D     lt input type  button  id  btn  value  Button  gt  x000D     lt div id  names  gt  x000D     lt  div gt  x000D   x000D   x000D    now type any thing in text field and click on button this will add item onto array and call function dispaly arry   x000D   x000D    document  ready function   x000D      x000D   function display array   x000D     x000D        names   text      x000D      each names function index value  x000D      x000D          names   append value     lt br  gt     x000D        x000D     x000D    x000D   var names     Alex   Billi   Dale    x000D   display array    x000D       btn   click function   x000D     x000D    var name       name   val    x000D    names push name     appending value to arry  x000D    display array    x000D     x000D       x000D    x000D      x000D    x000D   x000D   x000D    showing array elements into div   you can use span but for this solution use same id

User · Answer

Use any examples that don t insert each element one at a time  one insertion is most efficient       element   html    lt span gt     array join   lt  span gt  lt span gt      lt  span gt

User · Answer

for  var i   0  i  lt  array length  i              element   append   lt span gt     array i      lt  span gt

User · Answer

You can do it like this by iterating through the array in a loop  accumulating the new HTML into it s own array and then joining the HTML all together and inserting it into the DOM at the end   var array          var newHTML       for  var i   0  i  lt  array length  i          newHTML push   lt span gt     array i      lt  span gt           element   html newHTML join         Some people prefer to use jQuery s  each   method instead of the for loop which would work like this   var array          var newHTML         each array  function index  value        newHTML push   lt span gt     value     lt  span gt             element   html newHTML join         Or because the output of the array iteration is itself an array with one item derived from each item in the original array  jQuery s  map can be used like this   var array          var newHTML     map array  function value        return   lt span gt     value     lt  span gt             element   html newHTML join         Which you should use is a personal choice depending upon your preferred coding style  sensitivity to performance and familiarity with  map     My guess is that the for loop would be the fastest since it has fewer function calls  but if performance was the main criteria  then you would have to benchmark the options to actually measure   FYI  in all three of these options  the HTML is accumulated into an array  then joined together at the end and the inserted into the DOM all at once   This is because DOM operations are usually the slowest part of an operation like this so it s best to minimize the number of separate DOM operations   The results are accumulated into an array because adding items to an array and then joining them at the end is usually faster than adding strings as you go     And  if you can live with IE9 or above  or install an ES5 polyfill for  map     you can use the array version of  map like this   var array              element   html array map function value        return   lt span gt     value     lt  span gt        join         Note  this version also gets rid of the newHTML intermediate variable in the interest of compactness

User · Answer

Original from Sept  13  2015   Quick and easy     each yourArray  function index  value           element   html      element   html       lt span gt     value    lt  span gt          Update Sept 9  2019  No jQuery is needed to iterate the array   yourArray forEach  value    gt            element   html        element   html    lt span gt   value  lt  span gt             --- Or without jQuery at all ---     yourArray forEach  value    gt        document querySelector   element   innerHTML      lt span gt   value  lt  span gt

User · Answer

You should use   map for this       var array     one    two    three     var el     map array  function val  i      return   lt span gt     val     lt  span gt             element   html el join         jsFiddle demo

[jquery] Display all items in array using jquery

Examples related to jquery

Examples related to html

Examples related to arrays