Javascript looping through a list not working

Question

I'm trying to make a table of emojis and made a foreach loop to make a table:

emojis = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '⚡', '✊', '✋', '✌', '✍', '❤', '⭐']
var i = 0
document.getElementById("emojiTable").innerHTML += "<table><tr>"
emojis.forEach(emoji => {
  if(i == 12) {
    document.getElementById("emojiTable").innerHTML += "</tr><tr>"
    i = 0
  }
  document.getElementById("emojiTable").innerHTML += "<td>"+emoji+"</td>"
  i ++
  })
  document.getElementById("emojiBAR").innerHTML += "</table>"

My problem is that when i run the code instead of getting a 12 x 6 table i get this weird piece of HTML:

<table><tbody><tr></tr></tbody></table>⚡✊✋✌✍❤⭐

I have no idea what is causing this. How can i fix this?

Do ***NOT*** use `.innerHTML +=` - you are meant to provide the *full* HTML here, if you hust do `el.innerHTML += ''` this goes through the HTML parser and since it's invalid, it will get automatically completed or discarded so the HTML produces is *valid*. It's probably best if you don't produce HTML at all but directly create DOM nodes. — VLAZ, Oct 18 '20 at 10:26
In other words you can't insert partial elements in innerHTML and close them later as you would do in a string or text editor — charlietfl, Oct 18 '20 at 10:31
Does this answer your question? [Is it possible to append to innerHTML without destroying descendants' event listeners?](https://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying-descendants-event-list) — VLAZ, Oct 18 '20 at 10:32

score 4 · Answer 1 · edited Oct 18 '20 at 11:06

A more practical approach that creates a table element and uses Table.insertRow() and Row.insertCell():

emojis = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '⚡', '✊', '✋', '✌', '✍', '❤', '⭐']

const table = document.createElement('table');
let row;

emojis.forEach((emoji, i) => {
  if (i % 12 === 0) {
    row = table.insertRow();
  }
   row.insertCell().innerHTML = emoji;  
})

document.getElementById("emojiTable").append(table)

<div id="emojiTable"></div>

score 1 · Accepted Answer · answered Oct 18 '20 at 10:45

Try this :

emojis = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '⚡', '✊', '✋', '✌', '✍', '❤', '⭐']

var i = 0
var table = document.getElementById("emojiTable");
var str = "<table><tr>";

emojis.forEach(emoji => {
  if (i == 12) {
    str += "</tr><tr>";
    i = 0
  }
  str += "<td>" + emoji + "</td>";
  i++
})

table.innerHTML = str;
//document.getElementById("emojiBAR").innerHTML += "</table>"

<div id="emojiTable"> </div>

score 0 · Answer 3 · answered Oct 18 '20 at 11:04

you want that ??

const emojis = 
  [ '', '', '', '', '', '', '', '', '', '', '', ''
  , '', '', '', '', '', '', '', '', '', '', '', ''
  , '', '', '', '', '', '', '', '', '', '', '', ''
  , '', '', '', '', '', '', '', '', '', '', '', ''
  , '', '', '', '', '', '', '', '', '', '', '', ''
  , '', '', '', '', '', '', '', '', '', '⚡', '✊', '✋'
  , '✌', '✍', '❤', '⭐']
  ;
(function() // IIFE generateTable
  {
  let eTable = document.createElement('table')
    , cRow   = null

  emojis.forEach( (emoji,indx)=>
    {
    if ( !(indx % 12)) cRow = eTable.insertRow()
    cRow.insertCell().innerHTML = emoji
    })
  document.getElementById('emojiTable').appendChild(eTable)
  })()

table {
  border-collapse: collapse;
  margin: .5em;
}
td {
  padding: .2em .7em;
  border: 1px solid grey;
}

<div id="emojiTable"></div>

Javascript looping through a list not working

3 Answers3