Далее на странице...
Свойство innerHTML в JavaScript позволяет получить и изменить КОД выбранного узла.
Для работы со свойством innerHTML вернемся к примеру из предыдущей заметки и для начала получим и выведем на экран КОД заголовка h1.
Свойство innerHTML - Получение и замена КОДа узла
<h1 id="name"> Заголовок h1
<p style="color:#03C">текст Параграфа</p>
</h1>
<script type="text/javascript">
document.write("Результат в Javascript: <p>");
var any = document.getElementById('name'); /* Выбираем тег h1 */
/* Выводим на экран КОД заголовка и его дочерних элементов */
document.write(any.innerHTML);
</script>
Комментарии к примеру.
-
Выбираем по id заголовок h1;
-
При помощи свойства innerHTML выводим на экран заголовок и параграф.
Обратите внимание: при помощи свойств textContent и innerText в этом примере был выведен на экран только текст выбранного узла и его дочернего элемента: после текста заголовка сразу следует текст параграфа - без разделения на абзацы.
А свойство innerHTML учитывает именно код, как это видно из примера выше: параграф начинается с новой строки сразу после заголовка. Текст параграфа выделяется синим цветом (т.е. учтено и стилевое оформление).
Далее при помощи свойства innerHTML заменим html-код выбранного узла.
<h1 id="name"> Заголовок h1
<p style="color:#03C">текст Параграфа</p>
</h1>
<script type="text/javascript">
document.write("Результат в Javascript: <p>");
var any = document.getElementById('name'); /* Выбираем тег h1 */
/* Изменение КОДа выбранного узла на указанный */
document.write(any.innerHTML = "<p style='color:red'>текст Параграфа</p>");
</script>
Комментарии к примеру.
-
Выбираем заголовок по id и редактируем в нем КОД, изменив цвет текста параграфа на красный.
При этом начальный текст заголовка не отображается.
