Да, вы не ошиблись, в этой статье я объясню, как создавать HTML-элементы с помощью Javascript. Давайте сначала поговорим о том, зачем нужен этот процесс. Представьте, что вы работаете над проектом, и на одной из страниц есть набор элементов div с одинаковым стилем, но с разной информацией внутри них. Мы будем называть эти элементы div карточками портфолио для простоты чтения. Теперь каждая карточка содержит различную информацию о разных проектах и, вероятно, имеет тег привязки, чтобы направить пользователя на страницу, связанную с карточкой.
Каждая карта, которую вы видите, на базовом уровне оформлена точно так же. Они имеют одинаковую ширину, высоту, фон, цвет текста, тень блока и эффект наведения. Единственная разница между этими картами — это текст и, возможно, изображение. Здесь мы можем использовать JS для динамического создания этих карт для нас. Ведь мы хотим, чтобы наш код был максимально СУХИМ. Мы не хотим копировать и вставлять каждую карточку портфолио, особенно если нам нужно постоянно добавлять карточки в проект.
Теперь, когда у нас есть вариант использования, давайте рассмотрим, как мы можем этого добиться. Есть несколько способов сделать это, но я хочу показать вам мой любимый. Это мой любимый, потому что, на мой взгляд, он достаточно масштабируемый и легко достижимый.
<div id="card-grid" class="card-container"></div>
Сверху контейнер, в котором будут жить наши карточки-портфолио. Всегда лучше хранить такие вещи внутри контейнера, потому что это поможет вещам перемещаться при адаптации веб-страницы к мобильным устройствам. (Примечание: в этой статье я не буду писать какой-либо CSS, но покажу, как применять классы там, где это необходимо.)
Теперь в файле JS начинается самое интересное. Сначала нам нужно указать место в документе HTML, чтобы начать создавать наши карты. Мы можем добиться этого с помощью . Метод getElementById(). Это позволит получить первый элемент с заданным идентификатором в файле HTML. Конечно, есть и другие способы направить наш JS на место в HTML, однако для нашего примера этот метод отлично сработает.
let newCardGrid = document.getElementById("card-grid");
Я знаю, что мои соглашения об именах не так хороши, но со мной все в порядке. Значение элемента с идентификатором «card-grid» теперь хранится в переменной newCardGrid. Теперь мы можем использовать эту переменную в функции для создания наших динамических элементов. Сначала нам нужно решить, какую информацию мы собираемся использовать в наших карточках. Мы можем поместить всю эту информацию в массив объектов, используя пары ключ/значение.
const card-info [
{
firstName: "John",
lastName: "Doe",
hobby: "playing Guitar",
},
{
firstName: "John",
lastName: "Smith",
hobby: "coding",
},
{
firstName: "Jane",
lastName: "Doe",
hobyy: "skating",
}
];
Этот массив будет содержать всю нашу информацию, уникальную для каждой карты. В этом случае можно легко добавить больше карт. Теперь нам нужно создать карточки для отображения нашей новой информации. Если у нас есть имя и фамилия, а также хобби, то можно с уверенностью предположить, что нам понадобятся три параметра в нашей функции, чтобы использовать каждую часть информации.
function createCard (first, last, hobby) {
const card = `<div class="portfolio-card">
<h1 class="portfolio-header">
Hi. My name is ${first} ${last}.
</h1>
<p class="personal-hobby">
I certainly do enjoy ${hobby}.
</p>
</div>`
newCardGrid.insertAdjacentHTML("beforeend", card);
};
Теперь я знаю, что это, вероятно, много, поэтому мы разобьем это на небольшие разделы, чтобы лучше понять эту функцию. Мы начинаем с того, что переменная хранит информацию о наших картах. Это помещается в строку шаблона и записывается так, как если бы мы создавали элементы HTML. Помещается в тег div с классом «porfolio-card. Это класс, в котором будет жить большая часть нашего CSS, чтобы стилизовать всю карточку. В div у нас есть тег h1 с классом на случай, если мы захотим оформить этот тег иначе, чем остальной текст, а также тег p с той же опцией. Внутри этих двух тегов находятся выражения, в которых живет наш динамический текст. Обернутые в ${} наши параметры, которые мы будем использовать при вызове нашей функции позже. Последняя строка этой функции помещает эту информацию в нашу переменную newCardGrid, которая указывает на HTML-контейнер, который мы создали ранее.
Давайте объясним эту строку подробнее, потому что это, вероятно, самая важная часть этой функции. Метод .insertAdjacmentHTML() анализирует данные, представленные в формате HTML, и помещает их в нужное место. Два параметра — позиция и текст. Следовательно, «beforeend» — это позиция, которая размещает информацию после последнего дочернего элемента в указанном элементе. Это означает, что каждый раз, когда функция запускается, следующая созданная карта будет помещена после последней созданной карты. Есть еще 3 положения, которые он может иметь, но мы сосредоточимся, например, на этом. Другой параметр — это данные, которые мы хотим, чтобы метод рассмотрел, это наша переменная карты.
Теперь, когда у нас есть функция для создания наших карточек и вставки их в документ HTML, где мы хотим, нам нужно передать ей наши данные для создания каждой уникальной карточки. Поскольку наши данные находятся в массиве объектов, мы можем отобразить их, чтобы назначить каждую часть информации параметрам функции.
card-info.map((card) => {
creatCard(
card.firstName,
card.lastName,
card.hobby
)
};
Этот кодовый блок отображает использование карты параметров для идентификации каждого объекта. Затем мы вызываем нашу функцию и заполняем параметры информацией об объектах. Наши параметры расположены в том же порядке, что и информация, поэтому мы можем легко их подключить. Помните, что независимо от того, где параметры используются в функции, их объединение таким образом упрощает рабочий процесс.
Вот и все!! Мы создали все наши карты в простой в использовании динамической функции. Теперь, если нам нужно добавить больше карт, все, что нам нужно сделать, это создать больше объектов с информацией, а функция сделает все остальное. Все классы готовы для стилей CSS, и нам больше не нужно писать HTML для каждой карты. Если каждой карточке требуется дополнительная информация, например новая пара ключ/значение, нам нужно будет реорганизовать нашу функцию, чтобы принять эти параметры и поместить их в строку шаблона, как и раньше.
Это обеспечивает гораздо более простой способ написания нескольких элементов, которые имеют одинаковый стиль на базовом уровне, и действительно делает наш код СУХИМ. Я надеюсь, что это поможет вам в ваших будущих начинаниях. Спасибо за прочтение!!
