Есть много причин использовать JavaScript для активного добавления HTML-элементов на ваш веб-сайт, в отличие от жесткого кодирования большого HTML-дерева. Некоторые из этих преимуществ включают лучшую читаемость исходного кода, более быстрый и оптимизированный веб-сайт и возможность использовать данные, полученные из различных API на вашем веб-сайте.
Чтобы добавить элементы HTML на свой веб-сайт с помощью JavaScript, вам сначала нужно добавить данные элементов, чтобы они где-то существовали, в то время как вы можете создавать совершенно новые элементы с нуля с помощью JavaScript и добавлять их, часто используя метод fetch для выполнение запроса GET из вашей базы данных будет более практичным и реалистичным приложением. Если вы хотите узнать больше о запросах GET, не стесняйтесь обращаться к следующему блогу: https://medium.com/@mumawjared/how-to-use-the-fetch-api-to-send-and- реализовать-получить-запросы-в-javascript-be396c9584a0”
Первым шагом к добавлению этих элементов будет создание местоположения для данных с некоторой базовой структурой HTML. Например, если мы хотим добавить изображение, нам сначала нужно место для этого изображения. это местоположение будет определено в HTML в первую очередь. Примерная структура показана ниже.
В этом HTML вы можете видеть, что у нас есть простой div, внутри которого ничего нет, в отличие от жестко закодированных внутренних текстов и атрибутов. В этом примере у нас есть div, содержащий идентификатор ramen-menu. Мы могли бы жестко запрограммировать некоторые детали, например так…
Но что, если бы у нас была куча разных изображений рамена для отображения? Нам пришлось бы вводить это несколько раз для каждой тарелки рамена, которую мы хотим показать, и если бы у нас было 200 мисок рамена, наш код занял бы 200 строк только для одного меню. Это займет уйму времени для загрузки, и это будет очень утомительно делать. К счастью, JavaScript поможет сделать это более эффективным и менее утомительным!
Возвращаясь к первому примеру структуры заполнителя, мы можем создать цикл, который вместо этого добавляет элементы в div!
Обратите внимание, что важно четко идентифицировать каждый тег HTML, чтобы вы могли выбирать теги в JavaScript с помощью .querySelector(), .getElementById() и .getElementsByClassName(). Какой метод вы решите использовать, полностью зависит от вас и от того, что вам наиболее удобно, но это может определяться вашими соглашениями об именах. Дополнительную информацию об интерфейсе документа JavaScript и связанном с ним методе можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/API/Document.
В этом примере цикл использует запрос на получение данных из API, однако этот принцип можно применить к любому объекту «ключ-значение» в JavaScript, а также к любым данным из внешнего API.
Давайте немного разберем это. Первое, что мы делаем, это устанавливаем константную переменную как ramenMenu вне функции в глобальной области видимости, это меню существует в нашем HTML, и мы выбираем его, чтобы добавить внутрь больше элементов. когда у нас есть ramenMenu, мы определяем константу изображения и используем .createElement, чтобы сообщить JavaScript, что изображение выглядит следующим образом:
‹img›‹/img›
Он пуст, поэтому теперь нам нужно заполнить его, сказав, что источник изображения равен источнику изображения в нашей базе данных, как показано ниже. Как только мы это сделаем, наш элемент изображения будет выглядеть так для JavaScript:
‹img src="./assets/ramen/shoyu.jpg"›‹/img›
Наконец, нам нужно сообщить JavaScript, что этот новый элемент должен куда-то идти, поэтому мы добавляем наш элемент изображения в наше рамен-меню, которое добавляет этот элемент в DOM (https://developer.chrome.com/docs/devtools/dom/ ) сайта.
Как только изображение будет добавлено к нашему ramenMenu, наш HTML будет выглядеть так на веб-странице. Точно так же, как у нас это было жестко запрограммировано раньше!
Вернемся к тому, почему это полезно; Помимо заполнения верхнего меню в этом приложении, у меня есть прослушиватель кликов, который прослушивает каждое изображение, и для каждого изображения, на которое нажали, он будет показывать более крупный рамен в более сфокусированном меню.
Когда я нажимаю на другой рамен на странице, я могу изменить увеличенное изображение благодаря моей функции renderRamen, я могу использовать его в качестве обратного вызова и применить прослушиватель кликов, который делает что-то еще с DOM. Это немного сложнее, но все, что нужно использовать, это те же самые принципы, описанные в этой статье.
Без JavaScript, просто используя чистый HTML, у меня не было бы этой функциональности, HTML статичен и не может быть динамическим, как JavaScript. Используя JavaScript, мы можем сделать веб-сайты более интересными, и вместо того, чтобы просто показывать, наши веб-сайты могут ДЕЛАТЬ что-то с помощью JavaScript.
И вот, с помощью JavaScript мы можем добавить изображение на наш сайт. Используя эту концепцию, мы также можем добавлять другие элементы или создавать более сложные функции. Полный список HTML-элементов можно найти ниже, а также методы интерфейса документа, доступные по умолчанию в JavaScript. Не стесняйтесь проверить их, так как это может дать вам больше идей о том, как сделать функциональность вашего сайта более интересной!
https://developer.mozilla.org/en-US/docs/Web/API/Документ
Гаррет — инженер-программист, а также скейтбордист, BMX-гонщик и музыкант из Денвера, штат Колорадо. Он любит говорить с людьми о технологиях и хочет выйти на сцену программного обеспечения в Денвере после окончания Flatiron Bootcamp.
