В статье Введение в JavaScript мы видели функцию document.write,
которая меняет содержимое веб-страницы, видимой пользователем. Но у нее мало возможностей для управления местом,
где менять страницу. А точнее, она пишет текст в то же самое место, где и выполняется (в пределах остального HTML).
Это делает функцию очень негибкой.
Лучше это делать, получив представление элемента в DOM и используя функцию innerHTML этого элемента, чтобы
изменить его содержимое.
Для начала DOM - Document Object Model - это представление
HTML страницы с помощью объектов Javascript. Это сердце взаимодействия между простым JavaScript и HTML в браузере.
Когда мы использовали document.write во введении, мы меняли HTML,
что влечет за собой изменение DOM.
В этом примере мы меняем DOM, который меняет HTML, отображаемый в браузере.
Преимущество такого метода в том, что мы можем независимо от расположения нашего Javascript, получить доступ и изменить любую часть DOM, а следовательно и HTML.
Единственное, что важно знать относительно расположения HTML, который мы хотим изменить, и Javascript, который будет менять этот HTML, это то, что HTML должен быть уже загрузен и разобран браузером, когда Javascript будет пытаться получить к нему доступ.
Этого можно добиться, либо поместив код Javascript после нужного HTML (либо вообще загружая Javascript после HTML), либо если Javascript загружен до HTML, тогда как-то дать ему понять, что нужно ждать до полной загрузки страницы. Для последнего способа есть несколько решений, но для простоты мы будем использовать первый способ. Мы просто поместим наш Javascript после HTML.
Чтобы иметь возможность изменить DOM объект, сначала нам нужно его получить. Есть достаточно много способов сделать это,
но, возможно, самый простой это метод getElementById класса document.
В следующем фрагменте кода вызов document.getElementById('display') получает объект, представляющий HTML элемент с
id display.
Один из атрибутов этого объекта называется innerHTML.
Если мы присвоим ему значение, тогда поменяется содержимое соответствующего HTML элемента.
В этом примере вы можете видеть просто элемент div (мы можем использовать любые элементы, но div это что-то нейтральное, и
поэтому используется часто) с текстом 'Hello World' и id display.
examples/js/set_innerhtml.html
<div id="display"></div>
<script>
document.getElementById('display').innerHTML = 'Hello World';
</script>
