Javascript 循环遍历列表不起作用

Question

我正在尝试制作一张表情符号表，并制作了一个 foreach 循环来制作一张表:

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>"

我的问题是，当我运行代码而不是得到一个 12 x 6 的表格时，我得到了这段奇怪的 HTML:

<table><tbody><tr></tr></tbody></table>😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷🙈🙉🙊👆👇👈👉👊👋👌👍👎👏⚡✊✋✌✍❤⭐

我不知道是什么原因造成的。我该如何解决这个问题？

Answer 1

创建表格元素并使用 Table.insertRow() 的更实用的方法和 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>