Javascript 如何在我的网站上显示表情符号？

当用户单击下拉菜单时，我想显示表情。但问题是我知道的唯一方法是一个接一个地输入表情符号

我的问题是如何显示所有表情符号？我想在用户单击下拉菜单和单击表情符号时，将其添加到文本区域

home.php：

职位状态
下拉列表
/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉菜单外单击，请关闭下拉菜单
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

编辑：我误读了问题，因此我将添加我将如何做的内容：

我会创建一个表情符号数组。然后，我将循环这个emojis数组。对于数组中的每个表情符号，您都希望执行“映射”操作，从而获得一个HTML元素。然后，您希望将这些元素作为子元素附加到下拉内容元素

例如：

var emojis = ['Okay, I think this is what you want:


After looking here and tinkering with the code for an hour, I got this:




emojis = document.getElementById("myDropdown").getElementsByTagName("li")

for (var i = 0; i < emojis.length; i++) {
  emojis[i].addEventListener("click", function() {
    var smiley = this.innerHTML;
    ins2pos(smiley, 'textf2');
  });
}

function ins2pos(str, id) {
  var TextArea = document.getElementById(id);
  var val = TextArea.value;
  var before = val.substring(0, TextArea.selectionStart);
  var after = val.substring(TextArea.selectionEnd, val.length);

  TextArea.value = before + str + after;
  setCursor(TextArea, before.length + str.length);

}

function setCursor(elem, pos) {
  if (elem.setSelectionRange) {
    elem.focus();
    elem.setSelectionRange(pos, pos);
  } else if (elem.createTextRange) {
    var range = elem.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
  }
}

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn') && !event.target.matches('#myDropdown li')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
var emojis=['好吧，我想这就是你想要的：

在查找和修补代码一个小时后，我得到了以下结果：


emojis=document.getElementById（“myDropdown”）.getElementsByTagName（“li”）
for（var i=0；i

#我的下拉列表{
显示：无
}
#myDropdown.show{
显示：块；
}

职位状态
下拉列表

😁
😃
😅

我不需要插入图像吗？我已经编辑了我的回答，很抱歉我误读了你的问题。Emojis是字符。在我的示例中，你需要执行
var Emojis=['当我点击下拉菜单时，什么也没有发生。但是我如何将它显示为我已有的表情图片？我必须使用
？如果你想这样做，你必须使用