Добавление и удаление DOM элементов

В этом уроке мы с вами разберемся, как добавлять и удалять елементы. Это очень важные знания, так как очень много елементов на странице мы добавляем и удаляем с помощью javascript.

Итак сейчас у нас пустой body и давайте добавим туда контейнер, с которым будем работать.

<html>
  <head>
      <title>Test</title>
  </head>
  <body>
    <div class='app'/>
    </div>
    <script src='code.js'></script>
  </body>
</html>

Теперь в нашем javascript мы можем создать новый DOM елемент с помощью метода createElement.

var title = document.createElement('div')
console.log('title', title)

В консоли браузера мы с вами видим этот пустой DOM елемент. И теперь, после того, как мы его создали мы можем вставить его в DOM. Для этого нам понадобится метод appendChild.

var app = document.querySelector('.app')
var title = document.createElement('div')

app.appendChild(title)

То есть мы нашли сначала наш елемент app, а потом добавили к нему как child елемент наш title.

Если мы посмотрим в браузер, то мы видим, что у нас появился новый пустой DOM елемент.

Но мы же хотим, чтобы наш елемент создавался с нужными нам классами. Для этого мы можем задать классы созданному елементу с помощью метода className.

var app = document.querySelector('.app')
var title = document.createElement('div')
title.className = 'title'

app.appendChild(title)

Теперь в браузере у нас появился в DOM уже елемент с классом. Но теперь хотелось бы еще и добавить этому новому елементу текст. Мы можем использовать для этого метод innerHTML, который мы с вами уже изучали ранее.

var app = document.querySelector('.app')
var title = document.createElement('div')
title.className = 'title'
title.innerHTML = 'This is our first news.'

app.appendChild(title)

Теперь мы в браузере видим, что у нас добавился новый DOM елемент с текстом и классом.

Но есть нюансы в том, как работает метод appendChild. Давайте сейчас добавим внутрь div app еще один div.

<html>
  <head>
      <title>Test</title>
  </head>
  <body>
    <div class='app'>
      <div class='content'>
        This is content for our news
      </div>
    </div>
    <script src='code.js'></script>
  </body>
</html>

Если мы посмотрим в браузер, то у нас сначала вывелся content, а потом уже после него вывелся созданный елемент. Это происходит потом, что метод appendChild добавляет елемент в самый конец. Это значит, что этот елемент будет добавлен как последний дочерний елемент в родителе.

Что же нам сейчас делать? Ведь мы хотим вывести сначала title, а потом контент. В этом нам поможет метод .insertBefore. Он работает точно также, как и appendChild, но добавляет DOM елемент на позицию перед указанным елементом. То есть первым аргументом мы указываем елемент, который хотим вставить, а вторым перед каким дочерним елементом мы будем вставлять.

var app = document.querySelector('.app')
var title = document.createElement('div')
title.className = 'title'
title.innerHTML = 'This is our first news.'

app.insertBefore(title, app.firstChild)

Так как мы хотим вставить перед первым дочерним елементом, то мы можем использовать метод .firstChild, чтобы найти первый дочерний елемент у app.

Также иногда нам приходится удалять DOM елементы. В этом нам поможет метод .removeChild. Мы можем просто указать, какой елемент мы хотим удалить из парента.

var app = document.querySelector('.app')
var title = document.createElement('div')
title.className = 'title'
title.innerHTML = 'This is our first news.'

app.insertBefore(title, app.firstChild)

app.removeChild(app.firstChild)

То есть мы вызываем на app removeChild, чтобы удалить дочерний елемент.

Есть также и более простой вариант записи, когда мы просто вызываем .remove на елементе.

var app = document.querySelector('.app')
var title = document.createElement('div')
title.className = 'title'
title.innerHTML = 'This is our first news.'

app.insertBefore(title, app.firstChild)

app.firstChild.remove()

Этот код отработает абсолютно одинаково.

Если у вас что-то не получается, либо возникли вопросы и комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.

#7 Добавление и удаление DOM элементов