Вставка элементов осуществляется через следующие методы:
- createElement;
- appendChild;
- insertBefore;
- insertAdjacentHTML;
Изучим эти методы более подробно.
Пожалуйста, напишите в комментариях, какой информации вам не хватило в данном уроке.
Метод createElement
Метод createElement позволяет создать новый элемент, передав в параметре имя тега. После создания с элементом можно работать как с обычным элементом, а также его можно добавить на страницу (например методом appendChild).
Если записать результат работы createElement в переменную, то в этой переменной будет такой элемент, как будто бы мы получили его через getElementById. (Если вы не помните, что такое getElementById, перейдите в урок: https://zen.me/1OeonDx1 ).
Единственное отличие - наш элемент не будет размещен на странице. А так мы можем менять ему innerHTML, атрибуты, навешивать обработчики событий и в конце концов разместить его на странице.
Метод appendChild
Метод appendChild позволяет вставить в конец элемента переданный элемент. Чаще всего используется после создания элемента с помощью createElement.
Пример 1 :
Давайте создадим абзац, установим ему текст и поместим на страницу в блок с id ="parent" :
Пример 2 :
Дан ul. Разместим в нем 10 li, при этом их текстом сделаем порядковые номера:
Задача
Дан ol. Вставьте ему в конец li с текстом 'пункт'.
Метод insertBefore
Метод insertBefore позволяет вставить элемент перед другим элементом. Чаще всего используется после создания элемента с помощью createElement.
В данном случае родитель - это родитель того элемента, перед которым произойдет вставка.
Пример:
Создадим абзац и поместим его перед вторым абзацем.
Задача
Создайте элемент ul, а в нем li с id="elem". Вставьте перед элементом c id="elem" новую li с текстом 'Привет, мир!'.
Метод insertAdjacentHTML
Данный метод Lпозволяет вставить строку HTML кода в любое место страницы. Код вставляется относительно опорного элемента.
Можно сделать вставку перед опорным элементом (способ вставки beforeBegin), после него (способ вставки afterEnd), а также в начало (способ вставки afterBegin) или в конец (способ вставки beforeEnd) опорного элемента.
Пример 1.
Способ beforeBegin:
Пример 2.
Способ afterEnd:
Попробуйте написать вышеуказанные примеры по памяти. Это поможет вам в будущем без труда вспомнить эту важную тему. Почему важную? Потому это основная задача javaScript что то менять, дополнять или удалять.