Содержимое элемента

Работа с содержимим элемента

Свойство innerHTML предоставляет доступ к содержимому элемента. С помощью него можно получить это содержимое и присвоить новое. Для примера создадим блок и выведем в консоль его контент:

HTML код:

<div id="cont"> 
  <p>Абзац внутри блока</p>
  <p>Ещё абзац</p>
</div>

JavaScript:

let div = document.getElementById('cont');
console.log(div.innerHTML);

Обратите внимание, элементы, которые находятся в блоке, представлены в консоли не в виде объектов. Так происходит потому, что в свойстве innerHTML содержимое элемента находится в виде строки.

Теперь запишем в блок новое содержимое:

JavaScript:

div.innerHTML = 'Текст внутри блока';

Если Вы запустите страницу, то увидите, что абзацы изчезли, а в место них отображается текст, который мы добавили в блок с помощью скрипта. При этом, код страницы, естественно, остался неизменным. Данный пример показывает, что JavaScript позволяет значительно изменить страницу по сравнению с тем, как она написана в HTML коде.

Свойство innerHTML позволяет записвать в элемент не только текст, но и тэги. Для примера добавим в блок ссылку:

div.innerHTML = "Это ссылка: <a href='https://basecourse.ru'>Базовый курс</a>";

Свойство innerHTML не позволяет добавить что-либо к существующему контенту. Оно полностью перезаписывает содержимое. Если нужно что-то добавить в элемент, то для этого можно получить содержимое, прибавить к нему то, что нужно и вновь записать в элемент. Для примера добавим к ссылке, которая есть в блоке, ещё абзац с текстом:

div.innerHTML += '<p>Новый абзац</p>';

Такой способ не желательно использовать, если в элементе уже есть контент большого объёма. Перезаписывание может потребовать времени и занять ресурсы компьютера. В этой ситуации лучше создать новый элемент и добавить его в нужный элемент.

Если добавить скрипт с использованием свойства innerHTML, то такой скрипт работать не будет.

Содержимое узла

Свойство data осуществляет дуступ к содержимому DOM-узла. Оно также позволяет получить содержимое и изменить его. Использование этого свойства рассмотрим на примере такого блока:

HTML код:

<div id="textblock">
  Текст в блоке
  <p>Абзац содержащийся в блоке</p>
</div>

Нам нужно изменить текст в начале блока. Предположим, что в блоке не один тэг p, а много. В этом случае нужно взять сам текст и работать с ним. Но он не является элементом, он не находится в отдельном тэге. Он является текстовым узлом. Поэтому он не имеет свойство innerHTML. Его содержимое можно изменить с помощью свойства data. Найдём этот текстовый узел и изменим его:

JavaScript:

let textBlock = document.getElementById('textblock');
let text = textBlock.childNodes[0];
text.data = 'Другой текст';

С помощью этого свойства можно также получить и изменить контент комментария, если нужно.