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