Стилизация вывода json нотации с помощью JS инструментов

Question

Вывожу в html нужное содержимое из JSON, но столкнулся с проблемой стилевого характера, как мне можно манипулировать внешним видом выведенных данных? Например, сделать ${data.name} жирным или изменить ему цвет? Готов к jQuery и прочим методам, интересно посмотреть на всё что есть сейчас.

'use strict'


const requestURL = "https://jsonplaceholder.typicode.com/users"
fetch(requestURL)
  .then(data => data.text())
  .then(data => (JSON.parse(data)))
  .then(data => {
    data.forEach(data => {
      const data1 = document.createElement("pre");
      data1.id = data.id;
      data1.innerHTML = `Name:${data.name}`
      data1.innerHTML += `\nNickname:${data.username}`
      data1.innerHTML += `\nPhone${data.phone}`
      document.querySelector('#result').appendChild(data1);
    })

  })

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <div id="result"></div>
  <script src="script.js"></script>
</body>

</html>

БЛОГ НА HUSL

Стилизация вывода json нотации с помощью JS инструментов

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