Иногда я возвращаюсь к практикам без использования jQuery, работая с DOM на чистом js. В таком контексте его называют vanila js.
Давайте рассмотрим пример создания DIV контейнера, определения его свойств, пользуясь только javascript без библиотек-оберток.
Сначала нужно создать новый DOM элемент:
|
1 |
var div = document.createElement('div'); |
Прикрепим контейтер в документ как дочерний элемент body:
|
1 |
document.body.appendChild(div); |
Добавим стили, классы, id:
|
1 2 3 4 5 6 |
div.className = 'className'; div.id ='myDIV'; // зададим стиль так: div.style.marginTop = '30px'; // или так: div.setAttribute("style", "margin-top: 30px"); |
Добавим контент:
|
1 |
div.innerHTML = '<span>Dynamic content creation</span>'; |