Казахстан, Семей
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Была в сети 14.06.2022 08:04
Калымжанова Алуа Бакытхановна
Арнайы пәндер мұғалімі
37 лет
97
192 454 
Местоположение
Создание, добавление и удаление элементов веб-станицы
Категория:
Информатика
17.05.2022 09:43
Просмотр содержимого документа
«Создание, добавление и удаление элементов веб-станицы»
Дисциплина: WEB-программирование и Интернет технологии
Тема курса: Применяет язык сценариев JavaScript и приемы программирования на JavaScript.
Тема урока: №18 Создание, добавление и удаление элементов веб-станицы
Для создания элементов объект document имеет следующие методы:
createElement(elementName): создает элемент html, тег которого передается в качестве параметра. Возвращает созданный элемент
createTextNode(text): создает и возвращает текстовый узел. В качестве параметра передается текст узла.
| 1 2 | var elem = document.createElement("div"); var elemText = document.createTextNode("Привет мир"); |
Таким образом, переменная elem будет хранить ссылку на элемент div. Однако одного создания элементов недостаточно, их еще надо добавить на веб-страницу.
Для добавления элементов мы можем использовать один из методов объекта Node:
appendChild(newNode): добавляет новый узел newNode в конец коллекции дочерних узлов
insertBefore(newNode, referenceNode): добавляет новый узел newNode перед узлом referenceNode
Используем метод appendChild:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
Заголовок статьи
Первый абзац
Второй абзац
var articleDiv = document.querySelector("div.article"); // создаем элемент var elem = document.createElement("h2"); // создаем для него текст var elemText = document.createTextNode("Привет мир"); // добавляем текст в элемент в качестве дочернего элемента elem.appendChild(elemText); // добавляем элемент в блок div articleDiv.appendChild(elem);
Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО! Полезное для учителя
  |
