Javascript | Создать HTML-элемент | Преобразование массива в список HTML

Создать HTML-элемент

Создает элемент из строки (без добавления его в документ). Если данная строка содержит несколько элементов, будет возвращен только первый из них.

• Используйте Document.createElement() для создания нового элемента.
• Используйте Element.innerHTML, чтобы установить его внутренний HTML в строку, указанную в качестве аргумента.
• Используйте Element.firstElementChild, чтобы вернуть версию элемента строки.

const createElement = str => {
  const el = document.createElement('div');
  el.innerHTML = str;
  return el.firstElementChild;
};

Example,

const el = createElement(
  `<div class="container">
    <p>Hello!</p>
  </div>`
);
console.log(el.className); // 'container'
const root = document.body;

const newElement = document.createElement('div');
newElement.textContent = 'Hello World';

root.append(newElement);

Преобразование массива в список HTML

Преобразует заданные элементы массива в теги <li> и добавляет их в список с заданным идентификатором.

• Используйте Array.prototype.map() и Document.querySelector() для создания списка html-тегов.

const arrayToHTMLList = (arr, listID) =>
  document.querySelector(`#${listID}`).innerHTML += arr
    .map(item => `<li>${item}</li>`)
    .join('');

Спасибо за прочтение

• 👏 Пожалуйста, хлопайте в историю и подписывайтесь на меня 👉
• 📰 Посмотреть больше материалов на Интервью по кодированию и проектированию систем
• 🔔 Подпишитесь на меня: LinkedIn!

Я знаю, что всегда есть что улучшить. Пожалуйста, поделитесь своими мыслями