Javascript 无延迟地向HTML元素添加表情列表

有没有一种方法可以将表情符号列表添加到元素中而不延迟？我在很多网站上看到过，但不知道他们是怎么做到的

当我想向列表中添加表情符号时，我创建了一个带有一些样式和onclick事件的按钮，然后将表情符号放入按钮的innerHTML中

需要重复2260次的代码：

document.getElementById('emojicard').innerHTML += '<button class="w3-button w3-center" style="width: 64px;"'
                    +'onclick="document.getElementById('+"'inputarea'"+').value += this.innerHTML;">' + emojis[emojiIndex]+'</button>';
                    emojiIndex++;
                    document.getElementById('emjprogbari').innerHTML = emojiIndex + ' out of ' + emojis.length;
                    document.getElementById('emjprogbar').style.width = (100*emojiIndex/emojis.length)+'%'

我通常必须在更新函数中执行此操作，但它会造成延迟。如果我把它放在其他地方，网站会冻结一段时间。我在列表中有2260个表情符号

---

我不想手动添加该元素中的所有表情，因为正如我所说的，我的列表中有2260个表情，我将向该列表添加更多表情。请回答。

继续在页面上附加html将花费浏览器很大的精力，更好的方法是将html附加到变量并在最后打印出来

首先定义一个变量：

var html = '';

开始循环：

html += '<button class="w3-button w3-center" style="width: 64px;"'
                    +'onclick="document.getElementById('+"'inputarea'"+').value += this.innerHTML;">' + emojis[emojiIndex]+'</button>';
                    emojiIndex++;
                    document.getElementById('emjprogbari').innerHTML = emojiIndex + ' out of ' + emojis.length;
                    document.getElementById('emjprogbar').style.width = (100*emojiIndex/emojis.length)+'%'

---

它是否比将其添加到样式为“display:none”的元素更好？谢谢！现在快了一百万倍！你救了我的命！请投赞成票，如果有帮助，请接受：我只有11个声誉：我把html内容放在一个变量中，然后也返回它的值。请看我的jQuery插件的第71到101行。

document.getElementById('emojicard').innerHTML = html;