菜鸡求教，如何将三个对象放在一个容器

三个不同对象，显示的不同的图标，划词不同内容分别弹出图标，如何合并到一个容器里面呢

原脚本地址

浏览器搜索扩展工具

 var icOnArraya= [ { name: '百度', image: 'https://i.ibb.co/R9HMTyR/1-5.png', popup: function (text) { open('https://search.bilibili.com/live?keyword=' + encodeURIComponent(text)); } }, ], icOnArrayb= [ { name: '打开', image: 'https://i.ibb.co/fxpm6Wc/image.png',host: [''], popup: function (text) { if(text.indexOf("http://")==0||text.indexOf("https://")==0) window.open(text, "_blank"); else window.open("http://"+text, "_blank"); } }, ], icOnArrayc= [ { name: '复制', image: 'https://i.ibb.co/R0bq3jm/icons8-delete-512-1.png', host: [''], popup: function (text) { text = document.defaultView.getSelection().toString(); document.execCommand('copy', false, null) } }, ], hostCustomMap = {}; iconArraya.forEach(function (obj) { obj.host.forEach(function (host) { hostCustomMap[host] = obj.custom; }); }); iconArrayb.forEach(function (obj) { obj.host.forEach(function (host) { hostCustomMap[host] = obj.custom; }); }); iconArrayc.forEach(function (obj) { obj.host.forEach(function (host) { hostCustomMap[host] = obj.custom; }); }); var text = GM_getValue('search'); if (text && window.location.host in hostCustomMap) { keyword.beforeCustom(hostCustomMap[window.location.host]); } var icOna= document.createElement('div'); var icOnb= document.createElement('div'); var icOnc= document.createElement('div'); iconArraya.forEach(function (obj) { var img = document.createElement('img'); img.setAttribute('src', obj.image); img.setAttribute('alt', obj.name); img.setAttribute('title', obj.name); img.addEventListener('mouseup', function () { keyword.beforePopup(obj.popup); }); img.setAttribute('style', '' + 'cursor:pointer!important;' + 'display:inline-block!important;' + 'width:22px!important;' + 'height:22px!important;' + 'border:0!important;' + 'background-color:rgba(255,255,255,1)!important;' + 'padding:0!important;' + 'margin:0!important;' + 'margin-right:5px!important;' + ''); icona.appendChild(img); }); iconArrayb.forEach(function (obj) { var img = document.createElement('img'); img.setAttribute('src', obj.image); img.setAttribute('alt', obj.name); img.setAttribute('title', obj.name); img.addEventListener('mouseup', function () { keyword.beforePopup(obj.popup); }); img.setAttribute('style', '' + 'cursor:pointer!important;' + 'display:inline-block!important;' + 'width:22px!important;' + 'height:22px!important;' + 'border:0!important;' + 'background-color:rgba(255,255,255,1)!important;' + 'padding:0!important;' + 'margin:0!important;' + 'margin-right:5px!important;' + ''); iconb.appendChild(img); }); iconArrayc.forEach(function (obj) { var img = document.createElement('img'); img.setAttribute('src', obj.image); img.setAttribute('alt', obj.name); img.setAttribute('title', obj.name); img.addEventListener('mouseup', function () { keyword.beforePopup(obj.popup); }); img.setAttribute('style', '' + 'cursor:pointer!important;' + 'display:inline-block!important;' + 'width:22px!important;' + 'height:22px!important;' + 'border:0!important;' + 'background-color:rgba(255,255,255,1)!important;' + 'padding:0!important;' + 'margin:0!important;' + 'margin-right:5px!important;' + ''); iconc.appendChild(img); }); icona.setAttribute('style', '' + 'display:none!important;' + 'position:absolute!important;' + 'padding:0!important;' + 'margin:0!important;' + 'font-size:13px!important;' + 'text-align:left!important;' + 'border:0!important;' + 'background:transparent!important;' + 'z-index:2147483647!important;' + ''); iconb.setAttribute('style', '' + 'display:none!important;' + 'position:absolute!important;' + 'padding:0!important;' + 'margin:0!important;' + 'font-size:13px!important;' + 'text-align:left!important;' + 'border:0!important;' + 'background:transparent!important;' + 'z-index:2147483647!important;' + ''); iconc.setAttribute('style', '' + 'display:none!important;' + 'position:absolute!important;' + 'padding:0!important;' + 'margin:0!important;' + 'font-size:13px!important;' + 'text-align:left!important;' + 'border:0!important;' + 'background:transparent!important;' + 'z-index:2147483647!important;' + ''); // 添加到 DOM document.documentElement.appendChild(icona); document.documentElement.appendChild(iconb); document.documentElement.appendChild(iconc); // 鼠标事件 document.addEventListener('mousedown', function (e) { if (e.target == icona || (e.target.parentNode && e.target.parentNode == icona)|| e.target == iconb || (e.target.parentNode && e.target.parentNode == iconb)|| e.target == iconc || (e.target.parentNode && e.target.parentNode == iconc)) { e.preventDefault(); } }); // 选中变化事件： document.addEventListener("selectionchange", function () { if (!window.getSelection().toString().trim()) { icona.style.display = 'none'; iconb.style.display = 'none'; iconc.style.display = 'none'; } }); // 鼠标事件 document.addEventListener('mouseup', function (e) { if (e.target == icona || (e.target.parentNode && e.target.parentNode == icona)|| e.target == iconb || (e.target.parentNode && e.target.parentNode == iconb)|| e.target == iconc || (e.target.parentNode && e.target.parentNode == iconc) ) { e.preventDefault(); return; } var text = window.getSelection().toString().trim(); var url = text.match(/( https?:\/\/(\w[\w-]*\.)+[A-Za-z]{2,4}(?!\w)(:\d+)?(\/([\x21-\x7e]*[\w\/=])?)?|(\w[\w-]*\.)+(com|cn|org|net|info|tv|cc|gov|edu)(?!\w)(:\d+)?(\/([\x21-\x7e]*[\w\/=])?)?)/i); if (url && iconb.style.display == 'none') { iconb.style.top = e.pageY +40 + 'px'; if(e.pageX -70<10) iconb.style.left='10px'; else iconb.style.left = e.pageX -70 + 'px'; iconb.style.display = 'block'; } else if (text.length >= 30) { iconc.style.top = e.pageY +40 + 'px'; if(e.pageX -70<10) iconc.style.left='10px'; else iconc.style.left = e.pageX -70 + 'px; iconc.style.display = 'block'; } else if (!text) { icona.style.display = 'none'; iconb.style.display = 'none'; } else if(text && icona.style.display == 'none'){ icona.style.top = e.pageY +40 + 'px'; if(e.pageX -70<10) icona.style.left='10px'; else icona.style.left = e.pageX -70 + 'px'; icona.style.display = 'block'; } });