Главная страница / Занятия / #6 / Изменение DOM-дерева с помощью JavaScript

Изменение DOM-дерева с помощью JavaScript

Задание:

Рассказать о методах модификации DOM-дерева в JavaScript.

HTML–код (index.html):

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Изменение DOM-дерева с помощью JavaScript</title>
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <p>Первый абзац.</p>
     <p>Второй абзац.</p>
     <p>Третий абзац.</p>
    </body>
   
   </html>

JS–скрипты (scripts.js):

   window.onload = function()
   {
    let paragraphElement = document.createElement('p');
    paragraphElement.innerHTML = 'Четвертый абзац.';
    document.body.append(paragraphElement);
    document.body.insertAdjacentHTML('beforeend', '<p>Пятый абзац.</p>');
    document.body.firstElementChild.remove();
   };

Результат:

Результат выполнения задания можно посмотреть здесь.