时间戳

首页 > 解决方案 > 我如何从数组中列出并在 javascript 中添加图像的贪婪

javascript - 我如何从数组中列出并在 javascript 中添加图像的贪婪

问题描述

在此处输入图像描述嗨，伙计们，我有很多书，对于每本书，我应该创建一个

带有书名和作者的元素并将其附加到页面上，我需要为每本书添加一张图片

const books = [
  {
    title: "book1",
    author: "x"},
  {
    title: "book2",
    author: "y"

  },
  {
    title: "book3",
    author: "z"
      }
];

这是我的代码：

function myfunction(books) {
  let content = document.querySelector("#content");
  for (var i = 0; i < books.length; i++) {
   var book =content.appendChild(document.createElement('P'))
   var list = content.appendChild(document.createElement('ul'))
   book.appendChild(list);
   var item = content.appendChild(document.createElement('li'))
   book.appendChild(document.createTextNode(books.title));
   item.appendChild(book);
   }
}

但它不起作用是未定义的： https ://i.stack.imgur.com/8IqrZ.jpg

我只需要表格，看起来应该是：

https://i.stack.imgur.com/QEtL3.jpg

标签： javascriptarrays

解决方案

这是一个小例子，你混淆了html，你没有使用books[i]，而不是appenChild我使用了innerHTML。

const books = [{
    title: "book1",
    author: "x"
  },
  {
    title: "book2",
    author: "y"

  },
  {
    title: "book3",
    author: "z"
  }
];
myfunction(books);

function myfunction(books) {
  let content = document.querySelector("#content");
  let list = content.appendChild(document.createElement('ul'));
  for (var i = 0; i < books.length; i++) {
    let item = list.appendChild(document.createElement('li'))
    let book = item.appendChild(document.createElement('p'))
    book.innerHTML = books[i].title + '-' + books[i].author + '<br><img src="https://via.placeholder.com/150">';

  }
}
<div id='content'></div>

推荐阅读