JavaScript | Как генерировать HTML-разметку?
Этот вопрос можно разделить на два варианта ответа:
Предлагаю рассмотреть два варианта генерации разметки. Но заранее опишу предназначение обоих вариантов.
Первый способ нужен в основном для серверной стороны, когда сайт работает на JavaScript. Я про NodeJS. Сервер генерирует разметку и отправляет строку в браузер пользователя. Браузер распознаёт HTML и радостно его отрисовывает.
Второй способ нужен в основном на клиентской стороне, когда вся генерация делается в браузере у пользователя.
Генерируем строку с HTML-разметкой JavaScript
Приведу пример. Нам нужно составить простой список товарных групп для сайта. Как из этого сделать HTML-разметку силами JavaScript.
У нас есть массив с условными товарными группами:
Технически нам нужно:
Шаг 1 — Пробегаем по массиву и преобразовываем каждый элемент массива
Для массового преобразования элементов массива будем использовать метод map() для объектов-прототипов Array.
Мы использовали экранирующую конструкцию,которая работает только внутри строки, объявленной при помощи обратных одинарных кавычек — « :
В итоге мы получим новый массив состоящий из строк:
Обернули значения элементов массива тегами li — JavaScript
Шаг 2 — Соединяем элементы нового массива в одну строку
Для склеивания строковых значений массива будем использовать метод join() для объектов-прототипов Array. В качестве разделителя будем использовать пустую строку — «»
В итоге мы получим одну длинную строку:
Одна строка из элементов массива — JavaScript
Шаг 3 — Оборачиваем строку из элементов дополнительными тегами списка
Нам просто нужно положить строку из элементов внутрь конструкции
Такая команда вернёт нам полноценную строку, которая будет соответствовать синтаксису HTML.
Создали строку HTML-списка — JavaScript
Теперь эту строку можно отдать в браузер на отрисовку. Разметка создана. Задача выполнена.
Генерируем объекты HTML-элементов JavaScript
У нас есть массив с условными товарными группами:
Технически нам нужно:
Шаг 1 — Создаём объекты «li»
В итоге получаем массив из объектов li.
Массив из объектов li — JavaScript
Шаг 2 — Создаём объект ul
Шаг 3 — Присваиваем детей для ul
Т. к. все наши элементы списка лежат в массиве, то для последовательного добавления каждого из них нам нужно использовать оператор sread — … (троеточие)
В результате наши объекты li станут детьми для объекта ul
Создали список и наполнили его элементами — JavaScript
Элементы созданы и собраны. Теперь останется просто поместить этот список в нужное место разметки. Задача выполнена!
Использование Java-script для генерации html-странички и конфигурации девайса
Тоже скорее для заметок, но может кому понадобится…
Давным — давно, в далекой галактике… Так, о чем это я? А, вот:
Эн-ное количество времени назад я мучил посетителей данного ресурса вопросами по HTTP-протоколу и тому подобным вещам, так как понадобилось мне в разрабатываемом девайсе настройки сделать, а подключение к компу у меня идет посредством Ethernet (через W5100). Первый вариант странички я нарисовал по старинке ручками, использовав формы и методику описанную Lifelover’ом в его цикле статей. Страничка вполне себе отображалась и позволяла менять данные, я даже начал писать парсер запроса для изменения настроек в устройстве, но потом так получилось, что задвинул проект в «долгий ящик» и если и занимался им, то другими моментами, а не общением «клиент-сервер».
Не так давно я опять решил поковыряться со страницей конфигурации и наконец допилить ее до конца. Так как весь костяк у меня был написан и отдавался — я решил прикрутить к нему забор реальных конфигурационных данных устройства (до этого у меня отдавались статические данные никак с реальной конфигурацией не взаимодействующие) при генерации странички и отдаче ее браузеру. Все бы ничего, да только данные надо было вносить по тексту в разных местах по всей странице, и никак не выходило сделать это красиво без нагромождения горы кода (ну и чтоб потом, если что, можно было добавить/изменить данные не переписывая кроме страницы еще и весь здоровый блок). Это меня никак не устраивало и тогда-то я вспомнил, что есть такая вещь как Java-script…
Вспомнил, нарыл в сети учебник, и стал читать. Что-то вспомнилось, т.к. когда-то я делал пару несложных страничек, но тогда я кроме пары функций по обработке мышки ничего больше не использовал. А тут оказалось все гораздо интересней. Результат который у меня получился (пока что без обработки ответа от девайса) приложен к статье в архиве. Весь процесс и язык описывать не буду, опишу только некоторые тонкости и те плюсы, которые я получил в результате…
1. Очень сильно изменился костяк страницы. Вместо кучи таблиц типа
Перед ним идет небольшой кусок CSS, а после идет скрипт. Все остальные составляющие страницы генерятся исключительно скриптом. Минус такого подхода конечно есть: если у пользователя в браузере запрещено исполнение скриптов, то он ничего толком не увидит. С другой стороны, у меня девайс не висит в каких-то там интернетах непонятно где, а лежит передо мной на столе и даже если я страдаю паранойей, я могу отрубить инет, включить исполнение скриптов, все настроить и потом опять вырубить скрипты в исходное состояние.
2. Само наполнение страницы посредством скрипта выглядит гораздо удобоваримей и вполне читабельно и понятно:
3. Перед вышеописанным блоком функций идет блок описания переменных. Сначала я описываю переменные, которые будут браться из настроек устройства (начиная с tablerowdata и заканчивая selected_eng включительно, далее идут переменные которые используются для генерации страницы, но от настроек устройства не зависят. Тут стоит обратить внимание на то, что в приложенном файле конфигурационные параметры уже присвоены переменным. Это сделано для того, чтобы страница выглядела наглядно. В МК этот блок выглядит так:
Тоесть чтобы сгенерировать страничку с реальными данными, мне надо на лету распарсить и заполнить только 2 строки текста а не всю страницу, как при первом варианте.
4. Самые внимательные заметили некоторую разницу в вышеприведенном коде и приложенном файле.
Первое отличие — нет названия первой переменной и не хватает квадратных скобок. Тут все просто: я вынес лишние символы из данной строки оставив только необходимые для нормального парсинга.
Второе отличие — появился непонятный .split(‘ ‘). Это результат работы специальной программы-оптимизатора натравленной на скрипт (только на скрипт, всю страницу он не пережевывает и плюется). Оптимизатор удаляет лишние пробелы из текста, преобразует длинные имена переменных в короткое a,b,c и хитрым образом анализирует и оптимизирует код, компонуя его в максимально короткие структуры. В результате не надо пихать в память МК тонны ничего не значащего текста. Выгода налицо.
5. Дабы не усложнять анализ полученных от клиента данных я в некотором роде оградил себя и его от ввода неверных параметров. Это касается настроек аналогового тракта устройства. Посредством хитрого изменения комбинаций атрибутов я добился того, что запрещенные состояния в данной позиции либо не видны, либо неактивны. Например закрылкам и тормозу нельзя поставить в соответствие номер двигателя. А если управление тягой 2го двигателя стоит на 3ей оси, то нельзя поставить ее же на любую другую ось. По идее надо еще проверять корректность параметров в блоке сетевых настроек, но пока я этого делать не стал. Короткий найденный вариант на тему «вводить в поле input только цифры» меня не устроил (к тому же я до сих пор не вкурил как он работает), а длинный мне пока делать не охота. Потому я просто выдаю вместо неверных данных 0.
6. По идее самый простой способ отправки данных на сервер был описан еще Lifelover-ом: организовать кнопку submit и все. Я решил submit не делать, потому что в случае какой-либо нестыковки все параметры вылазят в командную строку браузера и он начинает ломиться неизвестно куда. Это происходит даже в случае, если обработчику submit’а запретить выдачу данных на сервер (во всяком случае в Chrom’е). Поэтому я организовал обычную кнопку, а по клику на нее сам ручками генерю строку запроса и отправляю ее на сервер посредством XMLHttpRequest. По идее данную часть кода надо еще немного модифицировать, потому как я проверял ее работу только в Хроме, а другие браузеры могут работать по другому, например кэшировать запросы и ответы и выдавать отсебятину. Из Хрома запрос уходит.
7. В предыдущем пункте я затронул вопрос о различии в обработке скрипта разными браузерами. Рассмотрим подробнее, в чем это сказывается:
Первое различие — обработка переменных: я не буду говорить за стандарт, но по идее идентификатор объявленный тегом является объектом с данным именем. Значит что к свойствам и методам этого объекта можно обращаться посредством «.». Но оказывается не всегда и не везде. Например, в приложенном файле есть следующая строка:
Первоначально она выглядела по другому:
Первоначальный вариант работал во всех браузерах за исключением IE (у меня 9). IE просто переставал обрабатывать скрипт и страница была почти пустой. После исправления IE успешно прожевал скрипт и даже не подавился, хотя я думал что придется все обращения переделывать через document.getElementById. Скорее всего так и стоит сделать дабы не вылазили непредвиденные ошибки. Похожая проблема вылезла и в Опере. Только Опера споткнулась в другом месте (IE кстати там тоже загнулся):
ch0 тоже пришлось брать посредством getElementById. После этого все заработало.
Второе различие — разница в обработке атрибута hidden (кстати это логический тип и когда он присутствует, то имеет значение true.
Мне надо было скрыть «запрещенный» элемент списка внутри тэга select, т.е. организовать строку html вида:
Первоначальая запись вида
применяемая к тэгу
срабатывала только в Хроме. Сафари, несмотря на общие корни движка, данный атрибут игнорировал. Остальные браузеры тоже.
Тогда я видоизменил запись:
После такого изменения нормально заработал FireFox, но IE, Опера и Сафари продолжали игнорировать атрибуты
В итоге пришлось делать финальный вариант:
его переваривают все браузеры (разве что с телефона не проверял, но по идее должно работать и там)…
Пооткрывайте файл разными браузерами (например Хромом и IE) и покрутите разные варианты настроек аналогового тракта, чтобы понять о чем речь.
P.S. Если в процессе экспериментов с приложенным файлом будут выявлены какие-либо траблы, прошу написать мне об этом, т.к. у меня вроде все работает.
UPD: После обработки скрипта оптимизатором и ручного убийства лишних пробелов в теле странице получилось порядка 6 с копейками Кил. текста, передаваемого непосредственно с МК, включая заголовок. По сравнению с 12К исходного материала — вполне неплохо. Предыдущий вариант у меня занимал 8 К текста (без удаления пробелов), но он не реализовывал и половины той функциональности, что есть сейчас, просто позволял ввести сетевые настройки и все.
UPD 2:
Сейчас проверил страничку с телефонов. У меня в наличии Nokia E71, браузер по иконке похож на мобильный FireFox, но его точную идентификацию я так и не нашел. И еще в наличии iPhone4 с Safary на борту.
iPhone отрабатывает все финты ушами с атрибутами как и на компе, а вот Симбиановский вариант атрибуты тэгов Options продолжает игнорить.
Но на iPhone сейчас вылезла другая фишка: я поправил в коде то место, где происходило закрытие TCP-соединения после отдачи странички. И телефонный сафари стал материться на то, что «страница не может быть отображена, т.к. соединение разорвано», хотя перед этим полностью грузит страницу и отображает. Ручная остановка загрузки страницы срабатывает и страницей можно пользоваться…
гм… эксплорер к разрыву соединения тоже относится крайне негативно. независимо от наличия Content-Length, хотя, если рвать соединение после небольшой задержки, все работает и не ругается. Однако Content-Length пришлось оставить.
UPD 3
Бился пол дня с кросс-браузерной отправкой запроса. Получилось следующее:
добавилась функция для корректного создания объекта запроса:
и соответственно изменилась сама функция выполнения запроса:
Так же, для предотвращения кэширования данных в заголовке страницы добавилась пара meta-заголовков:
С кэшированием особенно злобствовала Опера. Даже IE нормально все отсылал, а опера ни в какую. После объявления данных заголовков все заработало нормально.
Если вместо null указать » (в сети частенько попадается такая запись) — то FireFox перестает слать запросы.
UPD 4
Еще про борьбу с кэшированием… После того как проапдэйтил статью, полез ковырять прогу дальше и обнаружил, что браузеры, все как один, опять закэшировали мои запросы. После долгих плясок с бубном я это таки преодолел.
Вышеуказанные пляски с тэгом «meta» действуют только на загружаемую страницу. Кстати к «мета» я добавил еще и
Хоть и пишут, что данный параметр устаревший, но при его наличии работает лучше.
Кроме мета-тэгов желательно в заголовке страницы указать значение Cache-Control:no-cache\r\n, т.к. на мета-тэги браузеры иногда забивают.
Теперь о самом запросе:
после метода .open надо с помощью метода .setRequestHeader установить атрибуты заголовка запроса:
Причем значения атрибута Cache-Control надо ставить именно в указанном порядке, иначе возникнут проблемы с оперой и FireFox’ом.
Так же запрос не должен оканчиваться символом ‘&’ иначе Хром не будет отдавать запрос.
Задолбали меня эти браузеры… Опять закэшировали.
Добил я вроде эту тему. В приложенном файле обновленная версия страницы. Смотреть лучше на локально развернутом сервере. В данной модификации отключена проверка на корректный ответ от железки.
Решение с проблемой кэширования крылось не только в заголовках HTTP вопросов/ответов, но и в корректной имитации сервера. Тоесть на этапе написания первого варианта статьи девайс умел отвечать только на 2 запроса: «GET / » и «GET /. ». Все остальные запросы он просто игнорировал. Внимательное курение результатов сниффинга и самого стандарта HTTP 1.1 выявило обязательную обработку ошибочных состояний 404 (не найдено) и 501 (не реализовано). Связано это с тем, что после загрузки страницы с «/» браузер пытается загрузить фавиконку (а иногда и не один раз) и шлет соответственные случаю запросы. Если на них не отвечать — то браузер вполне может посчитать что сервер отпал и все остальное догрузить из кэша. А состояние 501 — добавил на всякий случай, если браузер вздумает спросить чего непотребное…
Комментарии ( 101 )
Минус такого подхода конечно есть: если у пользователя в браузере запрещено исполнение скриптов, то он ничего толком не увидит.
На самом деле, сейчас это нельзя считать минусом, потому что браузеров без поддержки javascript нет, и по умолчанию его поддержка всегда включена. А если человек отключает javascript, то он должен понимать, что это повлечет за собой неработоспособность большинства сайтов.
А может лучше было бы хранить страницы во внешней памяти? и придумывать бы ничего не пришлось, и размером не так ограничен, даже картинки можно было бы запилить.
Создание html-элементов в JavaScript
В HTML мы создаём столько элементов, сколько нам нужно, в коде, добавляя и удаляя их по мере изменения страницы в соответствии с psd-макетом или потребностями сайта.
JavaScript также умеет создавать html-элементы. Для этого у него есть несколько методов. Давайте рассмотрим их.
Создание элемента. Метод document.createElement
Метод предназначен для создания тегов, или, иначе, html-элементов. Общий вид:
В этом случае элемент создается только в памяти компьютера и не отображается на странице, пока не будут использованы специальные методы для его вставки в тело документа.
Но, как правило, этого мало. Необходимо, во-первых, задать какой-то текст внутри div-a, а во-вторых, назначить для него css-форматирование либо с помощью класса, либо с помощью id.
Для этого добавим элементу свойство id или className (подразумевается, что css-форматирование для этого id или класса у вас существует):
Что касается текста, то его добавление реализуется 2-мя способами: с помощью свойства innerHTML или метода document.createTextNode():
В первом случае вы можете добавить не только текст, но и любые html-теги.
Обратите внимание на то, что во втором случае придётся не только создать текстовый узел, но и добавить его в качестве дочернего элемента к нашему div-у. Для этого нам понадобился метод appendChild(). Синтаксис его таков:
Поскольку в модели DOM текст считается специальным текстовым узлом (еще есть узлы-элементы и узлы-комментарии), то его нужно добавлять к элементу-родителю, т.е. div-у в нашем примере.
Таким же методом будет добавлен и узел-элемент, созданный с помощью document.createElement(), причем добавляется он в самый конец родительского элемента.
Например, создадим изображение и добавим его внутрь div-а с :
Здесь должна появиться картинка с камнем
Нажмите на кнопочку, пожалуйста.
Обратите внимание, что картинка появилась после текста, т.е. в самом низу родительского элемента.
Если несколько раз нажать на кнопку в примере выше, изображение будет добавлено тоже несколько раз.
Пример использования метода document.createElement() в виде небольшой игры
Все 672 элемента мы добавляем методом appendChild() в совершенно пустой в html-разметке
Центрирование элементов выполнено с помощью Flexbox-модели.
Использование метода insertBefore
Если вам необходимо вставить новый элемент в определенном месте, можно использовать вставку ДО определенного элемента методом insertBefore. Его синтаксис таков:
Пример: вставляем текст абзаца в div с после заголовка h2:
В этом примере firstElementChild, использованный во второй строке, является обращением к первому дочернему элементу div-a с текстом «Пока это первый абзац».
Пока это первый абзац.
Использование метода insertAdjacentHTML и других
Это более универсальный метод, если вам необходимо вставить некий текст (изображение) внутрь другого тега или ДО тега, или ПОСЛЕ него. Для этого существуют специальные строки:
Методов существует 3 разновидности: для добавления текста, html-кода и элемента. Ситаксис этих методов таков:
Использовать их нужно в зависимости от потребности.
Например, вставим текст (вводите каждый раз новый текст в поле, чтобы увидеть разницу):
Место для вставки текста
Код примера (с одним из вариантов строк):
А теперь используем вставку кода html:
Дополняемый список
В последнем примере будем добавлять один из элементов, задавая ему цвет текста случайным образом с помощью функции randomColor() :
Место для вставки элемента
Как и где располагаются элементы, можно посмотреть на скриншоте или попробовать самому 🙂
Замена элемента на другой
Если вы не хотите добавлять новый элемент в структуру уже существующего, вы можете заменить тот, что был на новый методом replaceChild(). Делается это несколько сложновато, т.к. при этом надо обратиться к родительскому элементу (узлу) и указать, что именно внутри него мы меняем на новый элемент какой-то из старых элементов.
Рассмотрим пример, в котором нам нужно заменить первый абзац внутри div-а на заголовок 3-го уровня.
Этот пример в действии:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ipsa sunt fugiat, tenetur cumque atque?
Voluptates facere fugit itaque fuga libero nisi maxime minima, ad molestias magnam. Excepturi, quos, ratione.
Как вы, наверное, заметили, ряд методов несколько сложно воспринимается с точки зрения понимания их синтаксиса. Поэтому в совремненном JavaScript чаще используются другие методы, похожие и по названию, и по действию, но со значительно более понятным синтаксисом.
Новые методы вставки элементов в html-разметку
С внедрением стандартов ES5 и ES6 в JavaScript появились новые методы, упрощающие манипуляции со вставкой элементов в html-разметку страницы. Не последнюю роль в этих нововведениях сыграла библиотека jQuery, т.к. в ней такие методы были реализованы уже очень давно.
В примере ниже вы можете выбрать любой из перечисленных методов и посмотреть, как он работает.
Обратите внимание, что метод replaceWith() заменяет элемент на указанный в скобках другой элемент или строку, и после этого другие методы не работают. Поэтому нажмите на кнопку «Обновить», если хотите еще раз попробовать применить все методы.
Free Online HTML Code Generator CSS JavaScript PHP JQuery
Free Online HTML CSS JavaScript jQuery Code Generator. www.html-code-generator.com Provides Free HTML Codes. Click Generate Code That You Can Copy And Paste Into Your Website. Without Typing A Single Character Of HTML Codes With Just One Click Generate Your HTML Codes. You Can Find All Things HTML From HTML Codes, HTML Editors, HTML Generator And CSS Generator, JavaScript Code Generator, And More.
HTML Code Generator
Online HTML Editor
Here you can write and see HTML in action. HTML editor to create HTML snippets or a whole web page. you can download and save your code.
HTML CSS Rainbow Text
HTML Rainbow colors Text. add your text or paragraph and Choose a color scheme click generate button. The HTML rainbow code is useful for copy and paste into AOL Instant Messenger. By sending the HTML text.
HTML select list generator
HTML select drop down list generator. one click generate HTML drop down select list. year select list, month select list, date select list, country names select list, country phone number select list, number select list, Google Web Font Name Select List
HTML Table Tow Color Row
HTML Table Generator. This Tools Easily Create HTML Table,create Tow Color Row Background, Tow Color Background Columns, Table Row Highlight On Hover. Click The Table Cell And Enter Properties And Press The Generate Button. HTML Table Using CSS
Marquee Generator
Online HTML Marquee Generator.Use this HTML marquee generator to create scrolling text or images for your website or blog. Image Marquee Generator, Link Marquee Generator Text Marquee Generator,Generate your own HTML marquees quickly and easily. CSS transform style preview your marquee
Typewriter Text Scroll
HTML JavaScript Typewriter Text Scroll. Generate your own HTML Typewriter quickly and easily. add your scrolling typing messages and click generate button and copy code for your website or blog.
CSS Generator
CSS Textbox Styles
CSS Textbox Styles. 100 more CSS textbox style select a textbox and you can add modify CSS codes
CSS checkbox style
200 CSS Radio Button Checkbox Toggle Switch, on off Button, Android On/Off Switch Button. change radio button checkbox style
CSS Button With icon
CSS Button Generator With icon. CSS Button With Image icon Generator. CSS gradient background color button and add icons, make CSS button for your website
CSS Triangle Generator
CSS Triangle Generator. this tool create border transparent Triangle. how to create triangle first click the triangle arrow Direction and change background colors change size and click below generate button.
CSS 3D Text Generator
CSS 3D text effect generator online. create online 3D text effect, this text effect showing CSS multiple text-shadows