базовый курс

ГРУППА КУРСА

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

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

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

HTML код:

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
8
9
10
<div id="cont"> 
<p>Абзац внутри блока</p>
<p>Ещё абзац</p></div>

JavaScript:

12
13
var div = document.getElementById('cont');
console.log(div.innerHTML);

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

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

JavaScript:

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

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

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

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

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

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

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

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

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

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

HTML код:

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

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

JavaScript:

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

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