«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript



Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



Свойство 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 и редактируем в нем КОД, изменив цвет текста параграфа на красный.

  • При этом начальный текст заголовка не отображается.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


JavaScript и Web

Тематические публикации
Популярные заметки
Последние заметки