Динамически вывести елементы на страницу

Question

например в HTML есть некоторая разметка

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root"></div>
<script src="js/scripts.js"></script>
</body>
</html>

в div#root нужно динамически добавить список ul>li

let ulList = document.createElement('ul');
let rootContainer = document.getElementById('root');
rootContainer.appendChild(ulList);

также есть массив состоящий из объектов который нужно вывести динамически на страницу

const books = [
    {
        author: "Скотт Бэккер",
        name: "Тьма, что приходит прежде",
        price: 70
    },
    {
        author: "Скотт Бэккер",
        name: "Воин-пророк",
    },
    {
        name: "Тысячекратная мысль",
        price: 70
    },
    {
        author: "Скотт Бэккер",
        name: "Нечестивый Консульт",
        price: 70
    },
    {
        author: "Дарья Донцова",
        name: "Детектив на диете",
        price: 40
    },
    {
        author: "Дарья Донцова",
        name: "Дед Снегур и Морозочка",
    }
];

также сделать валидацию, чтобы выводить только объекты в которых есть значения price, name, author

Answer 1

Так?:

const books = [{
    author: "Скотт Бэккер",
    name: "Тьма, что приходит прежде",
    price: 70
  },
  {
    author: "Скотт Бэккер",
    name: "Воин-пророк",
  },
  {
    name: "Тысячекратная мысль",
    price: 70
  },
  {
    author: "Скотт Бэккер",
    name: "Нечестивый Консульт",
    price: 70
  },
  {
    author: "Дарья Донцова",
    name: "Детектив на диете",
    price: 40
  },
  {
    author: "Дарья Донцова",
    name: "Дед Снегур и Морозочка",
  }
];


let root = document.getElementById('root');

let ul = document.createElement('ul');
root.appendChild(ul);


for (var key in books) {

  if (books[key].author && books[key].name && books[key].price) {
    let li = document.createElement('li');
    li.innerHTML = books[key].author + ' ' + books[key].name + ' ' + books[key].price;
    ul.appendChild(li);
  }

}

<div id="root"></div>

БЛОГ НА HUSL

Динамически вывести елементы на страницу

Ответы (1 шт):