#5 innerHTML. Изменяем содержимое DOM элемента
Очень часто мы сталкиваемся с задачей, когда нам нужно прочитать содержимое DOM елемента или изменить его. В этом нам всегда поможет метод innerHTML.
Давайте решим такую задачу. У нас есть два контейнера. Первый с каким-то текстом, а второй пустой. И мы хотим прочитать содержимое первого контейнера и записать в второй контейнер.
Давайте добавим два контейнера на страницу.
<body>
<div class='container1'>
This is my name
</div>
<div class='container2'>
</div>
<button onclick='changeColor()'>Change</button>
</body>
Теперь при нажатии кнопки change давайте найдем оба контейнера. Для этого мы можем использовать функцию querySelector, которую мы с вами уже знаем.
function changeColor () {
var firstContainer = document.querySelector('.container1')
var secondContainer = document.querySelector('.container2')
}
Теперь давайте прочитаем содержимое первого контейнера.
function changeColor () {
var firstContainer = document.querySelector('.container1')
var secondContainer = document.querySelector('.container2')
var content = firstContainer.innerHTML
}
Давайте напишем console.log, чтобы посмотреть, что мы получили.
console.log(content)
Если мы посмотрим в консоль, то мы увидим наш текст, но обратите внимание, что мы получили абсолютно все содержимое со всеми пробелами. Обычно нам нужен только текст, поэтому мы можем вызвать метод trim, чтобы удалить из строки все пробелы.
var content = firstContainer.innerHTML.trim()
Если мы посмотрим в браузер, то у нас выводится строка без пробелов.
Как же теперь записать этот контент в второй контейнер? Очень просто. Используя все тот же innerHTML и присвоение.
function changeColor () {
var firstContainer = document.querySelector('.container1')
var secondContainer = document.querySelector('.container2')
var content = firstContainer.innerHTML.trim()
secondContainer.innerHTML = content
}
Если мы посмотрим в браузер, то при клике change содержимое первого контейнера копируется в второй контейнер. Но нужно помнить, что присваивая что-то в innerHTML вы перезаписываете абсолютно все содержимое.
Давайте рассмотрим более сложный пример, который очень часто нужен. У нас много однотипных елементов на странице и нам нужно прочитать содержимое их всех, чтобы передать куда-то дальше.
Давайте добавим список напитков на страницу
<ul class='drinks'>
<li>
Coffee
</li>
<li>
Tea
</li>
<li>
Juice
</li>
<li>
Water
</li>
</ul>
Теперь мы хотим прочитать весь список и создать массив, в который мы запишем все елементы этого списка.
Итак сначала найдем все елементы списка
var elements = document.querySelectorAll('.drinks li')
Теперь добавим пустой массив drinks, куда будем записывать все напитки
var drinks = []
Теперь пройдем циклом по елементам и найдем контент каждого елемента
for (var i = 0; i < elements.length; i++) {
var content = elements[i].innerHTML.trim()
}
И запушим теперь каждое найденое название в массив. Для этого мы можем использовать метод push, который добавляет елемент в конец массива.
for (var i = 0; i < elements.length; i++) {
var content = elements[i].innerHTML.trim()
drinks.push(content)
}
console.log(drinks)
И после цикла давайте выведем в консоль массив. Если мы посмотрим в браузер, то у нас вывелся наш массив елементов и мы можем его передать куда угодно или изменить.
Если у вас что-то не получается, либо возникли вопросы и комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.