Question

我想从LI创建IMG和UL并将图像插入IMG以在DOM中显示。

这是我的代码。非常感谢。

let data = {
  cats: {
    names: ['cat-1', 'cat-2'],
    photos: ['image/cat-1.jpg" alt="cat"', 'image/cat-2.jpg" alt="cat'],
    count: [0, 0]
  }
};

const createImageItem = () => {
  console.log(data.cats.photos.length);
  let UL = document.getElementById('list');
  let LI = document.createElement('li');
  let IMG = document.createElement('img');
  LI.appendChild(document.createTextNode('data.cats.photos[0])'));
  UL.appendChild(LI);
};

<ul id="list"></ul>

Answer 1

您可以使用index来获取数据并像这样使用它-

let data = {
  cats: {
    names: ['cat-1', 'cat-2'],
    photos: ['image/cat-1.jpg" alt="cat"', 'image/cat-2.jpg" alt="cat'],
    count: [0, 0]
  }
};

const createImageItem = (index) => {

  let UL = document.getElementById('list');
  let LI = document.createElement('li');
  let IMG = document.createElement('img');
  IMG.src = data.cats.photos[index];
  LI.appendChild(document.createTextNode(data.cats.names[index]));
  LI.appendChild(IMG);
  UL.appendChild(LI);
};

console.log(data.cats.photos.length);
createImageItem(0);
createImageItem(1);

<ul id="list">
</ul>

将图像从对象插入src

1 个答案: