如何使用 javascript 附加一个 li 和链接元素答案

【问题标题】：How do I append an li and link elements using javascript如何使用 javascript 附加一个 li 和链接元素
【发布时间】：2020-11-10 20:33:56
【问题描述】：

我正在构建一个灯箱，当我单击具有特定于特定图像列表的不同类的 div 时，我想显示一个图像列表。灯箱正在工作，当我单击 div 时，它会出现，但是当我单击具有“.work-1”类的潜水时，问题就出现了，列表显示为字符串而不是实际图片。我来求救了。

    /* Gallery operation*/
const button = document.querySelectorAll('.gallery');
const list = document.createElement('ul');
const lightbox = document.createElement('div');
const parentDiv = document.querySelector('header').parentNode;
const childDiv = document.querySelector('header');
/*const newList =*/
const logo = [
  '<a href="images/logos1.jpg"></a> ',
  '<a href="images/logos2.jpg"></a> ',
  '<a href="images/logos3.jpg"></a> ',
  '<a href="images/logos4.jpg"></a> ',
];
const flyer = [
  '<a href="images/logos1.jpg"></a> ',
  '<a href="images/logos2.jpg"></a> ',
  '<a href="images/logos3.jpg"></a> ',
  '<a href="images/logos4.jpg"></a> ',
];

button.forEach(function getThem(div){
   div.addEventListener('click',function(){
     const box  = parentDiv.insertBefore(lightbox, childDiv);
     box.id = 'lightbox';
     const newBox = box.appendChild(list);
     function getList(){
               if(e.target.className === 'work-1'){
          logo.forEach(function(logo){
            var li = document.createElement('li');
            li.innerText = e;
            newBox.append(li);
          });
        }else if(e.target.className === 'work-2'){
            flyer.forEach(function(flyer){
              var li = document.createElement('li');
              li.innerText = e;
              newBox.append(li);
            });
          }
        };
        box.getList();
        box.classList.add('active');
       console.log(button);

   });
   lightbox.addEventListener('click', e => {
  if (e.target !== e.currentTarget) return
  lightbox.classList.remove('active')
});

【问题讨论】：

首先，您将 innerText 设置为 e，我认为这应该是一个事件，但并不完全确定。我想你想将 innerText 设置为 logo 或 flyer

标签： javascript arrays lightbox

【解决方案1】：

我认为您的策略不太正确，我认为您想要做的是显示图像

<img>

而不是锚标记

<a href'..>

您可以通过使用src='images/something.jpg' 将<img> 附加到您的li 来获得此结果

因此，您想要一个包含所有图片网址的列表：

const logos = [
  'images/logos1.jpg',
  'images/logos2.jpg',
  'images/logos3.jpg',
  'images/logos4.jpg',
]

然后尝试添加这个：

logos.forEach(function(logo){
            var li = document.createElement('li');
            var img = document.createElement('img');
            img.src = logo;
            li.append(img);
            newBox.append(li);
          });

ES6：

logo.forEach((logo) => {
   const li = document.createElement('li');

   const img = document.createElement('img');

   img.src = logo; // set the url of your image like 'images/logos1.jpg'

   li.append(img);

   newBox.append(li);
})

【讨论】：