Динамический рендеринг HTML-элементов с помощью JavaScript

Введение

HTML, или «язык гипертекстовой разметки», часто является первым языком, который изучают новые веб-разработчики, и он очень важен в онлайн-мире. На самом деле, без него у нас вообще не было бы веб-сайтов. Однако, несмотря на свою важность, у него есть ограничения. К счастью, другой чрезвычайно популярный и важный язык, JavaScript, здесь, чтобы помочь. Для тех, кто не знаком с этими языками кодирования, HTML можно рассматривать как основу или скелет веб-сайта. Без него все разваливается, но и сам по себе он мало что может сделать. Между тем, JavaScript больше похож на нервную систему. Он принимает входные данные и сигналы, посылая их остальному телу, чтобы что-то происходило. Тяжело иметь одно без другого.

HTML

Теперь, хотя есть много вещей, которые вы можете и должны жестко закодировать в свой HTML-файл, есть много ситуаций, когда эта стратегия просто не сработает. Например, возьмем веб-сайт, на котором есть форма для новых пользователей для создания учетной записи. HTML может создать и отобразить форму без посторонней помощи, и это здорово, пока мы не решим попробовать отобразить эту информацию на странице. Взгляните на этот пример формы:

<div id="user-form-div">
  <h2 id="form-title">Create Account</h2>
   <form id="user-profile-form">
    <input type="text" id="full-name" name="fullName" placeholder="Your Name Here">
    <input type="text" id="favorite-sport" name="favoriteSport" placeholder="Your Favorite Sport Here">
    <input type="text" id="favorite-language" name="favoriteLanguage" placeholder="Your Favorite Coding Language Here">
    <button type="submit" id="create-profile" name="createProfile">Create Profile!</button>
  </form>
</div>

JavaScript

Без добавления чего-либо еще эта форма позволит пользователю заполнить каждое текстовое поле и даже нажать «Создать профиль!» кнопка. Однако все, что произойдет, — это обновление страницы, и информация будет сохранена в URL-адресе. Это не очень полезно. Это тот момент, когда в дело вступает JavaScript, который принимает информацию, отправленную пользователем, и фактически отображает ее на странице. Мы можем начать с открытия нашего файла JavaScript и использования «document.getElementById» для ссылки на форму и ее контейнер div.

const newUserForm = document.getElementById("user-profile-form");
const userFormDiv = document.getElementById("user-form-div");

Теперь JavaScript знает, что «newUserForm» относится к HTML-форме в целом, а «userFormDiv» относится к элементу div, который содержит как форму, так и элемент h2 с заголовком формы. Это скоро пригодится. Затем мы добавим в форму «прослушиватель событий» с «событием», которое JavaScript «прослушивает» на предмет отправки формы. Мы также можем добавить «.preventDefault()» и «.reset()», чтобы предотвратить попадание информации в URL-адрес и очистить форму после ее отправки.

newUserForm.addEventListener("submit", (event) => {
  newUserForm.reset();
  event.preventDefault();
})

На этом этапе прослушиватель событий установлен, но все, что он делает до сих пор, это очищает ввод формы при отправке. Один из способов сделать что-то со значениями, отправленными пользователем, — создать объект, используя значения из формы. После создания объекта «newUser» мы создадим функцию обратного вызова с именем «displayUser()», которая принимает «newUser» и всю его информацию в качестве параметра, передаваемого в функцию.

const newUser = {
  name: event.target.fullName.value,
  favSport: event.target.favoriteSport.value,
  favLanguage: event.target.favoriteLanguage.value
}
displayUser(newUser);

Прямо сейчас JavaScript действительно начинает играть мускулами. Хотя HTML уже может иметь пустой элемент div с несколькими пустыми элементами p, ожидающими заполнения, такой ненужный код — не лучшая идея. Вместо этого мы можем использовать информацию, предоставленную объектом «newUser», для динамического отображения необходимых элементов HTML. Вот как это может выглядеть.

Шаг первый:

Создайте новый элемент div и три элемента p в функции displayUser().

const displayUser = (newUser) => {
  const newUserDiv = document.createElement("div");
  const userNameP = document.createElement("p");
  const favSportP = document.createElement("p");
  const favLanguageP = document.createElement("p");
}

Шаг второй:

Дайте каждому из этих новых элементов p возможность отображать информацию, используя «.textContent», используя информацию из объекта «newUser», передаваемого при отправке формы.

userNameP.textContent = newUser.name;
favSportP.textContent = newUser.favSport;
favLanguageP.textContent = newUser.favLanguage;

Шаг третий:

Используйте комбинацию методов «.appendChild()» и «.append()» для отображения этих новых элементов на веб-странице. Имейте в виду, что это не изменяет базовый HTML. Вместо этого он манипулирует веб-страницей в самом браузере.

userFormDiv.appendChild(newUserDiv);
newUserDiv.append(userNameP, favSportP, favLanguageP);

Теперь у нас есть полнофункциональная форма, которая позволит пользователю ввести свою информацию, нажмите «Создать профиль!» и увидеть информацию своего профиля, отображаемую в совершенно новом контейнере div, прямо под формой. Вот как выглядит форма до создания учетной записи:

Теперь взгляните на то, как это выглядит после того, как пользователь отправит форму:

На странице отображается новенький div, а также еще три элемента p с текстом непосредственно от пользователя. Повторим еще раз: ни один из элементов, которые теперь отображаются на странице, не существовал даже до того, как был задействован JavaScript! Кроме того, если мы хотим добавить и отобразить несколько новых профилей пользователей, нам не нужно делать ни единого дополнительного кода. С текущим прослушивателем событий, прикрепленным к форме, каждый раз, когда форма отправляется, функция «displayUser» берет эту информацию и создает все заново с любой предоставленной новой информацией.

Чтобы пройти полный круг и соединить все точки, взгляните на весь файл JavaScript, благодаря которому все это произошло:

const newUserForm = document.getElementById("user-profile-form");
const userFormDiv = document.getElementById("user-form-div");

newUserForm.addEventListener("submit", (event) => {
  const newUser = {
    name: event.target.fullName.value,
    favSport: event.target.favoriteSport.value,
    favLanguage: event.target.favoriteLanguage.value
  }
  displayUser(newUser);
  newUserForm.reset();
  event.preventDefault();
})

const displayUser = (newUser) => {
  const newUserDiv = document.createElement("div");
  const userNameP = document.createElement("p");
  const favSportP = document.createElement("p");
  const favLanguageP = document.createElement("p");

  userNameP.textContent = newUser.name;
  favSportP.textContent = newUser.favSport;
  favLanguageP.textContent = newUser.favLanguage;

  userFormDiv.appendChild(newUserDiv);
  newUserDiv.append(userNameP, favSportP, favLanguageP);
}

Все сказано и сделано, с менее чем 30 строками кода у нас теперь есть бесконечное количество пользователей, которых можно генерировать на странице, создавая новые HTML-элементы и текст динамически с помощью JavaScript.

Заключение

В следующий раз, когда вы окажетесь в ситуации, когда вы не уверены, сколько элементов потребуется, особенно когда решение принимается пользователями вашего сайта и сильно различается, помните об этой тактике. Вместо жесткого кодирования пустых элементов динамический рендеринг и отображение новой информации на странице по мере необходимости приведет к более чистому коду, в котором будет легче ориентироваться. Это не только облегчит вашу жизнь, но и сделает то же самое для других веб-разработчиков, которые также могут работать над тем же проектом. Что еще более важно, это приводит к лучшему опыту для тех, кто действительно решит использовать ваш веб-сайт.