<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Создание DOM элементов через JavaScript

Создание DOM элементов через JavaScript

На этом уроке вы узнаете, как создавать элементы с нуля и добавлять их на страницы, используя JavaScript. Чтобы нам было от чего отталкиваться, создадим новый элемент привычным способом, средствами HTML.

.text {
    font-size: 18px;
    font-family: Arial;
    color: black;
    text-align: center;
}

<div class="text">Пример создания элемента через <strong>JavaScript</strong>.</div>


Создание DOM элементов через JavaScript.

Создание элемента через JavaScript

Теперь создадим такой же элемент div, используя JavaScript. Первым делом мы должны создать новый элемент div. Для этого объявим переменную divElem, в которой он будет хранится и создадим новый элемент c помощью метода createElement.

let divElem = document.createElement('div');

У тега div есть класс text, установим для него класс, применив метод className. И наконец внутри тега div находится текст с тегом strong. Свойство innerHTML запишет внутри тега текст вместе с имеющимися тегами в нем.

let divElem = document.createElement('div');
divElem.className = "text";
divElem.innerHTML = "Пример создания элемента через <strong>JavaScript</strong>."
console.log(divElem);

Мы создали элемент, но пока он находится только в переменной (HTML страница пустая). Увидеть сгенерированный HTML код, мы может только в консоли браузера. Поскольку метод createElement только создает элемент, то для вывода элемента на страницу существуют другие методы.


Создание DOM элементов через JavaScript.

Вывод элемента на HTML страницу

Теперь следует указать браузеру, в какое место HTML-документа нужно поставить созданный элемент. Выведем наш элемент в конце тега body. Метод append добавляет элемент в конец узла.

document.body.append(divElem);

Создание DOM элементов через JavaScript.

Метод prepend добавляет элемент или строку в начало узла.

document.body.prepend(divElem);

Создание DOM элементов через JavaScript.

Методы append, prepend, before, after

Теоретически элемент можно вывести в любом месте на странице.

  • elem.append – добавляет элемент после последнего его дочернего элемента;
  • elem.prepend – добавляет элемент перед первым его дочерним элементом;
  • elem.before– вставляет элемент перед родителем;
  • elem.after – вставляет элемент после родителя;
  • elem.replaceWith – заменяет элемент;

Как работают данные методы.

<div class="container">
    <div class="start">линия отсчета</div>
</div>

// JavaScript
let container = document.querySelector('.container');

//append
let div = document.createElement('div'); // Создаём новый элемент div
div.className = "append"; // Добавляем к div CSS класс
div.textContent = "append"; // Добавляем текст
container.append(div); // Добавляем только что созданный элемент в DOM дерево

//prepend
let div2 = document.createElement('div');
div2.className = "prepend";
div2.textContent = "prepend";
container.prepend(div2);

//after
let div3 = document.createElement('div');
div3.className = "after";
div3.textContent = "after";
container.after(div3);

//before
let div4 = document.createElement('div');
div4.className = "before";
div4.textContent = "before";
container.before(div4);


Создание DOM элементов через JavaScript.

Сгенерированный на лету HTML код.


Создание DOM элементов через JavaScript.

Метод replaceWith


//replaceWith
let div5 = document.createElement('div');
div5.className = "replace-with";
div5.textContent = "replaceWith";
container.replaceWith(div5);

Метод replaceWith заменил полностью родителя вместе с дочерними элементами.


Создание DOM элементов через JavaScript.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.