Иногда я возвращаюсь к практикам без использования jQuery, работая с DOM на чистом js. В таком контексте его называют vanila js.
Давайте рассмотрим пример создания DIV контейнера, определения его свойств, пользуясь только javascript без библиотек-оберток.
Сначала нужно создать новый DOM элемент:
|
|
var div = document.createElement('div'); |
Прикрепим контейтер в документ как дочерний элемент body:
|
|
document.body.appendChild(div); |
Добавим стили, классы, id:
|
|
div.className = 'className'; div.id ='myDIV'; // зададим стиль так: div.style.marginTop = '30px'; // или так: div.setAttribute("style", "margin-top: 30px"); |
Добавим контент:
|
|
div.innerHTML = '<span>Dynamic content creation</span>'; |
vanila js
Написать комментарий
Данная запись опубликована в 05.08.2018 21:12 и размещена в рубрике javaScript.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Декабрь 17, 2018 г.
При работе с HTML документом из JavaScript одной из типовых операций является установка значения того или иного атрибута выбранного контейнера (тега).
Vanila JS
В чистом js (vanila) значение атрибута можно установить следующим образом:
[crayon-68122b717ee4d176182106/] ...
Читать
Май 4, 2020 г.
Немного ванильного js, на этот раз: как найти контейнер по указанному классу.
Сразу рассмотрим более сложный пример, когда требуется найти элемент с классом .class-child внутри элемента .class-parent.
В DOM мы используем функцию element.getElementsByClassName(CLASSNAME), ...
Читать