Innerhtml

Примеры

У нас есть ненумерованный список бытовой техники с ценами. Информация оформлена в виде форматированного текста. Цена выделена жирным шрифтом. Внутри круглых скобок курсивом прописано полное название валюты, цвет текста — красный.

4 пункта из списка

Так выглядит HTML-код списка:

<ul>
   <li>Холодильник - <span><b>52000</b> руб. <i style="color: red">(рублей)</i></span></li>
   <li>Телевизор - <span><b>41000</b> руб. <i style="color: red">(рублей)</i></span></li>
   <li>Стиральная машина - <span><b>37000</b> руб. <i style="color: red">(рублей)</i></span></li>
   <li>Плита - <span><b>26000</b> руб. <i style="color: red">(рублей)</i></span></li>
</ul>

Давайте теперь посмотрим на различия в выводе innerText и innerHTML. Как мы будем это делать? Все операции будем писать напрямую в консоль браузера.

1. Для начала получим список всех элементов <li>. (HTMLCollection — коллекция HTML)

var spisok = document.getElementsByTagName("li")

Получение массива HTML-элементов одного типа в JavaScript

2. Потом будем обращаться к элементам HTML коллекции (в нашем случае объектам HTMLCollection) и выводить у них свойства innerText и innerHTML

innerText

spisok[].innerText
   // "Холодильник - 52000 руб. (рублей)"
spisok.innerText
   // "Телевизор - 41000 руб. (рублей)"

Вывод в консоль браузера свойство innerText

На выходе мы получаем строковый тип данных без первоначального форматирования. То есть «голый» текст, который заключён внутри элементов <li>. Из всех дочерних элементов были извлечены текстовые значения. Всё, что доставалось конкатенировалось (складывалось) в одну строку. Визуально очень понятно о чём идёт речь.

innerHTML

spisok[].innerHTML
   // "Холодильник - <span><b>52000</b> руб. <i style="color: red">(рублей)</i></span>"
spisok.innerHTML
   // "Телевизор - <span><b>41000</b> руб. <i style="color: red">(рублей)</i></span>"

Вывод в консоль браузера свойство innerText

В случае с innerHTML мы получаем «салат» в котором намешаны HTML-элементы и текстовое содержимое. Фактически это тоже строковый тип данных. Визуально воспринимать такое содержимое гораздо сложнее.

textContent

Следующее
полезное свойство тегов – textContent, которое содержит чистый текст без тегов.
Например, отобразим текст содержимое тега body, получим:

console.log(document.body.textContent);

Как видите в
консоле у нас только текст, прописанный внутри этого элемента без каких-либо
тегов.

Где и когда
используется это свойство. Представьте, что вы создали страницу, где каждый
пользователь может оставить комментарий. Ушлые посетители вашего сайта
обязательно захотят попробовать свои недюжие хакерские способности, чтобы
исказить содержимое страницы или даже нарушить работу всего сайта. Как они это
будут делать? Да очевидно – прописывать теги в своих посланиях, в том числе и
теги <script> с надеждой
выполнить свой скрипт на вашей странице. Для защиты от таких нехитрых атак как
раз и можно использовать свойство textContent следующим образом. Предположим,
на нашей странице имеется раздел div с комментариями:

<div id="comm"></div>

И мы просим
пользователя ввести какую-либо строчку:

let msg = prompt("Ваш комментарий:", "");

и, затем,
добавляем его в блок div:

comm.textContent = msg;

Если теперь
пользователь вводит что-то вроде:

<script>Это мой вредоносный скрипт</script>

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

comm.innerHTML = msg;

то теги бы были
прописаны в структуру документа:

это текст вместе с тегом

что мы и видим
на нашей странице. Вот ключевое отличие между textContent и innerHTML.

Атрибуты async и defer

– атрибут , который используется для того, чтобы браузер не осуществлял остановку чтения страницы при загрузке скрипта. Скрипт в этом случае будет загружаться асинхронно, а как только он загрузится, он тут же выполнится.

<script src="common.js" async></script>

– атрибут , который так же, как и атрибут «говорит» браузеру, что его загрузку нужно выполнять асинхронно. Но в отличие от он указывает на то, что этот скрипт необходимо выполнить только после полной загрузки страницы.

<script src="path_to/script.js" defer></script>

Второе отличие от заключается в том, что будет сохранена очерёдность выполнения скриптов.

<script src="path_to/1.js" defer></script>
<script src="path_to/2.js" defer></script>

Т.е. скрипты вне зависимости от того, какой из них загрузиться быстрее всё равно будут выполнены браузером в порядке их подключения, т.е. сначала , а потом .

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

<script src="path_to/script.js" async defer></script>

Атрибуты и можно использовать только для скриптов, подключаемых на страницу с помощью атрибута .

Методы интерфейса

Code Examples

To help you understand what is innerHTML property and how it’s used, we’ll provide you with useful code examples that you can practice your code-writing skills on. After you click the Try it Live button, you will be able to make modifications and learn without having to leave the browser!

The first example displays how you can make modifications to two DOM elements:

Example Copy

The following code is used to alert the content of with :

Example Copy

You can also remove the HTML content from the tag with the following code:

Example Copy

The final code example shows the code for when you want to modify the content of HTML element, its URL, and the target of a link:

Example Copy

Добавление множества узлов

Продолжим работать со вставкой узлов.

Рассмотрим случай, когда в документе уже есть большой список . И тут понадобилось срочно добавить ещё 20 элементов .

Как это сделать?

Если новые элементы пришли в виде строки, то можно попробовать добавить их так:

Но операцию можно по-другому переписать как . Иначе говоря, она не прибавляет, а заменяет всё содержимое списка на дополненную строку. Это и нехорошо с точки зрения производительности, но и будут побочные эффекты. В частности, все внешние ресурсы (картинки) внутри перезаписываемого будут загружены заново. Если в каких-то переменных были ссылки на элементы списка – они станут неверны, так как содержимое полностью заменяется. В общем, так лучше не делать.

А если нужно вставить в середину списка? Здесь вообще не поможет.

Можно, конечно, вставить строку во временный DOM-элемент и перенести оттуда элементы, но есть и гораздо лучший вариант: метод !

Поднятие (hoisting) функций и переменных

Функции вида function declaration можно использовать в JavaScript до их объявления. Это происходит из-за того что они поднимаются (hoisting) или другими словами «перемещаются» в начало текущего контекста.

// вызвать функцию greet
greet();
// объявление функции greet
function greet() {
  console.log('Привет!');
}

Но поднятие в JavaScript выполняется не только функций вида function declaration, но и переменных, объявленных с помощью ключевого слова var. При этом поднятие осуществляется только самого объявления переменной.

console.log(width); // undefined
var width = 500;

Вышеприведённый код после поднятия будет аналогичен следующему:

var width;
console.log(width); // undefined
width = 500;

innerHTML Property Explained

So, what is innerHTML? Let’s start by reminding everyone that every HTML element has an inner HTML property. It is used to define HTML tags and also the content that is inserted between them. This property is one of the components of the DOM that lets developers manipulate the appearances of web pages. In other words, it allows you to get information about all DOM elements.

Additionally, you have the opportunity to modify or replace HTML elements. Therefore, you should learn how the innerHTML JavaScript property can be used to your advantage.

People can struggle and complain about innerHTML not working. Such things usually occur because of human error, when strings are not appropriately defined, or there are some mistakes in JavaScript code.

This property is used to set or return the HTML content inside an element:

Example Copy

insertAdjacentHTML/Text/Element

С этим может помочь другой, довольно универсальный метод: .

Первый параметр – это специальное слово, указывающее, куда по отношению к производить вставку. Значение должно быть одним из следующих:

• – вставить непосредственно перед ,
• – вставить в начало ,
• – вставить в конец ,
• – вставить непосредственно после .

Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».

Например:

…Приведёт к:

Так мы можем добавлять произвольный HTML на страницу.

Варианты вставки:

Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет HTML.

У метода есть два брата:

• – такой же синтаксис, но строка вставляется «как текст», вместо HTML,
• – такой же синтаксис, но вставляет элемент .

Они существуют, в основном, чтобы унифицировать синтаксис. На практике часто используется только . Потому что для элементов и текста у нас есть методы – их быстрее написать, и они могут вставлять как узлы, так и текст.

Так что, вот альтернативный вариант показа сообщения:

Событие onclick javaScript и три способа обработки событий

Событие происходит во время одинарного щелчка кнопкой мыши. Обычно для события назначается обработчик, то есть функция, которая сработает, как только событие произошло. Обработать событие, т.е. отреагировать на него посредством скрипта, можно тремя способами. Рассмотрим их:

Пример: По щелчку на кнопке вывести диалоговое окно с сообщением «Ура!»

1. Через свойство объекта с использованием пользовательской функции:

Скрипт:

function message() {
		alert("Ура!");
	}

html-код:

<body>
<form>
<input type="button" name= "myButton" onclick="message()" value="Щелкни!">
<form>

В данном примере в html-коде мы видим кнопку. У кнопки присутствует атрибут («по щелчку»), в значении которого стоит вызов функции с названием . Это пользовательская функция, описанная выше в скрипте. В самой функции выводится диалоговое окно, что и задано согласно заданию.
Скрипт при такой обработке события обычно находится в области документа

Через атрибут тега:

<body>
<form name="myForm">
<input type="button" name="myButton" 
    value="Щелкни!" onclick="javascript: alert('Ура!')">
<form>

Это упрощенный вариант обработки события, он подходит только для небольшого кода, когда необходимо выполнить один-два оператора. Иначе код будет плохочитаемым.
В качестве атрибута кнопки указывается («по щелчку»), а в качестве значения пишется скрипт из операторов с указанием на каком языке он написан (). В нашем случае оператор для вывода модального окна со словом «Ура!»

Через регистрацию функции-обработчика в качестве свойства элемента:

html-код:

<form name="myForm">
<input type="button" value="Щелкни!" id="myButton">
<form>

Скрипт:

document.myForm.myButton.onclick = message; 
function message() {
	alert('Ура!');
}

В html-коде здесь присутствует кнопка с атрибутом , который необходим для обращения к кнопке через скрипт.

В скрипте, который обязательно находится ниже дерева элементов (можно перед закрытием тега ), находится обращение к кнопке (), для которой назначается обработчик события со значением ссылки на функцию. Обращение к кнопке может быть организовано через атрибут ()

Скобки после названия функции не ставятся. В данном случае это именно ссылка на функцию, иначе, при использовании скобок, функция была бы вызвана, а не назначена в качестве обработчика событий.

Именно такой способ обработки событий максимально приближен к тому, который происходит, например, в ОС windows.

Как лучше выводить результаты примеров?

Важно: При вызове после окончания загрузки страницы (при обработке событий onclick, oninput, …), страница перезапишется, поэтому вызывать этот метод не рекомендуется. Для примеров лучше использовать метод .

добавляет html во время построения DOM

блокируют выполнение JS, пока пользователь не нажмёт OK

Рассмотрим все простые способы вывода отладочной информации:

1. alert('str'); // показывает окошко

2. document.write('htmlstr'); // пишет на страницу

3. document.innerHTML += 'htmlstr'; // добавляет на страницу

4. console.log('str'); // выводит в консоль браузерах

Задание Js8_5. Выполните задание по инструкции:

1. Создайте веб-страницу и расположите в ней тег с изображением грустного смайлика.
2. Щелчок на изображении () вызывает заданный метод (пользовательская функция):

<img id="smileImg" src="smile1.jpg" onclick="sayHello()" >

В скрипте опишите метод (функция ), который «спрашивает», как зовут пользователя, а затем приветствует его по имени, и меняет изображение на улыбающийся смайлик (свойство тега ):

function sayHello() { 
	var userName=prompt("Как вас зовут?");
	if(userName){
		alert(...);
		document.getElementById("smileImg"). ...=...;
	}
}

 =>>

Некоторые особенности языка JavaScript при работе с переменными и функциями

У языка JavaScript есть одна интересная особенность, которая связана с тем как браузер понимает код, в котором использование переменной идёт до её объявления.

Рассмотрим эту ситуацию на следующем примере:

function sayHello() {
  console.log("Привет, " + myName);
  var myName = "Вася"; // переменная не существует вне этой функции
}
sayHello();

В этом примере вывод значения переменной в консоль идёт до её объявления и инициализации.

Как браузер понимает этот код? Браузер объявления переменных всегда поднимает вверх их функциональной области видимости.

Т.е. браузер будет видеть вышепредставленный код следующим образом:

function sayHello() {
  var name;
  console.log("Привет, " + name);
  name = "Вася";
}
sayHello();

В результате в консоли отобразится сообщение «Привет, undefined».

Кроме переменных, вверх их функциональной области видимости браузер поднимает ещё функции. Т.е. код JavaScript позволяет вызвать функцию до её объявления.

var name = "Вася";
sayHello(); // вызов функции sayHello
// объявление функции sayHello
function sayHello() {
  console.log(name);
}

Вышеперечисленные особенности языка необходимо знать и по возможности их не использовать в коде. Т.к. это может привести к тому, что код станет более трудночитаемым. В результате это может привести к ошибках.

Поэтому следует придерживаться следующих правил:

• Переменные и функции объявлять до их использования.
• По возможности не использовать глобальные переменные или свести их количество к минимуму.

Методы вставки

Чтобы наш появился, нам нужно вставить его где-нибудь в . Например, в .

Для этого есть метод , в нашем случае: .

Вот полный пример:

Вот методы для различных вариантов вставки:

• – добавляет узлы или строки в конец ,
• – вставляет узлы или строки в начало ,
• –- вставляет узлы или строки до ,
• –- вставляет узлы или строки после ,
• –- заменяет заданными узлами или строками.

Вот пример использования этих методов, чтобы добавить новые элементы в список и текст до/после него:

Наглядная иллюстрация того, куда эти методы вставляют:

Итоговый список будет таким:

Эти методы могут вставлять несколько узлов и текстовых фрагментов за один вызов.

Например, здесь вставляется строка и элемент:

Весь текст вставляется как текст.

Поэтому финальный HTML будет:

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

Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.

А что, если мы хотим вставить HTML именно «как html», со всеми тегами и прочим, как делает это ?

Свойства интерфейса

Интерфейсы веб API

Ключевое слово var

При создании переменной почти всегда используется ключевое слово . Использование этого слова означает то, что переменная всегда добавляется в текущий контекст (область видимости). В функции — в контекст этой функции, вне какой-либо функции — в глобальный контекст.

Если Вы не используете строгий режим, то JavaScript позволяет создавать переменные без ключевого слова . С такими переменными необходимо быть очень осторожными. Это связано с тем, что такая переменная вне зависимости от контекста, в котором она создана, автоматически становится глобальной. А это может привести к непредсказуемым результатам.

Рассмотрим следующий пример:

function sayHello() {
  var myName = "Вася"; // переменная не существует вне этой функции
}
sayHello();
console.log("Привет, " + myName); //строчка выдаст ошибку: myName - не определена.

Если избавиться от ключевого слова , то тогда переменная будет объявлена как глобальная переменная:

function sayHello() {
  myName = "Вася"; // переменная будет глобальной, несмотря на то, что она объявлена в функции
}
sayHello();
console.log("Привет, " + myName); //строчка вернёт: Привет, Вася.

Погружение

Существует ещё одна фаза из жизненного цикла события – «погружение» (иногда её называют «перехват»). Она очень редко используется в реальном коде, однако тоже может быть полезной.

Стандарт DOM Events описывает 3 фазы прохода события:

1. Фаза погружения (capturing phase) – событие сначала идёт сверху вниз.
2. Фаза цели (target phase) – событие достигло целевого(исходного) элемента.
3. Фаза всплытия (bubbling stage) – событие начинает всплывать.

Картинка из спецификации демонстрирует, как это работает при клике по ячейке , расположенной внутри таблицы:

То есть при клике на событие путешествует по цепочке родителей сначала вниз к элементу (погружается), затем оно достигает целевой элемент (фаза цели), а потом идёт наверх (всплытие), вызывая по пути обработчики.

Ранее мы говорили только о всплытии, потому что другие стадии, как правило, не используются и проходят незаметно для нас.

Обработчики, добавленные через -свойство или через HTML-атрибуты, или через с двумя аргументами, ничего не знают о фазе погружения, а работают только на 2-ой и 3-ей фазах.

Чтобы поймать событие на стадии погружения, нужно использовать третий аргумент вот так:

Существуют два варианта значений опции :

• Если аргумент (по умолчанию), то событие будет поймано при всплытии.
• Если аргумент , то событие будет перехвачено при погружении.

Обратите внимание, что хоть и формально существует 3 фазы, 2-ую фазу («фазу цели»: событие достигло элемента) нельзя обработать отдельно, при её достижении вызываются все обработчики: и на всплытие, и на погружение. Давайте посмотрим и всплытие и погружение в действии:

Давайте посмотрим и всплытие и погружение в действии:

Здесь обработчики навешиваются на каждый элемент в документе, чтобы увидеть в каком порядке они вызываются по мере прохода события.

Если вы кликните по , то последовательность следующая:

1. → → → (фаза погружения, первый обработчик)
2. (фаза цели, срабатывают обработчики, установленные и на погружение и на всплытие, так что выведется два раза)
3. → → → (фаза всплытия, второй обработчик)

Существует свойство , содержащее номер фазы, на которой событие было поймано. Но оно используется редко, мы обычно и так знаем об этом в обработчике.

Чтобы убрать обработчик , нужна та же фаза

Если мы добавили обработчик вот так , то мы должны передать то же значение аргумента в , когда снимаем обработчик.

На каждой фазе разные обработчики на одном элементе срабатывают в порядке назначения

Если у нас несколько обработчиков одного события, назначенных на один элемент, в рамках одной фазы, то их порядок срабатывания – тот же, в котором они установлены:

innerText, outerText и их отличие от textContent

также как используется для извлечения текста из элементов.

Но в отличие от как бы копирует текст, отображаемый этим элементом в браузере. Он учитывает стили, применённые к элементу (отображается элемент или нет). Когда элемент скрыт, не включает его текстовый контент в возвращаемые данные.

Кроме этого, не добавляет в возвращаемый результат содержимое и .

При установке элементу текстового контента, также как удаляет все имеющиеся в нём узлы и создаёт новый текстовый узел с указанным содержимым.

Синтаксис свойства :

// получим текстовый контент $elem
const text = $elem.innerText;
// зададим $elem текстовый контент
$elem.innerText = 'Новый текст...';

Пример, в котором показана разница между и :

Внимание! Это очень важный текст.alert(‘А это очень важное сообщение!’);

const $elem = document.querySelector(‘#message’);
const textByTextContent = $elem.textContent; // «Внимание! Это очень важный текст.alert(‘А это очень важное сообщение!’);»
const textByInnerText = $elem.innerText; // «Внимание! Это очень важный текст.»

Из примера видно, что не включает в возвращаемые данные контент элемента .

В этом примере мы ещё дополнительно удалим отображение элемента из документа, т.е. установим ему «»:

/* CSS */
#message > span {
display: none;
}
Внимание! Это очень важный текст.alert(‘А это очень важное сообщение!’);

const $elem = document.querySelector(‘#message’);
const textByTextContent = $elem.textContent; // «Внимание! Это очень важный текст.alert(‘А это очень важное сообщение!’);»
const textByInnerText = $elem.innerText; // «Внимание!»

Таким образом учитывает стили элементов, и возвращает только текст отображаемый этим элементом в браузере.

outerText

Ещё в DOM API у элементов имеется свойство . Оно возвращает текстовое содержимое элемента аналогично свойству .

Синтаксис свойства :

// получим текстовый контент $elem
const text = $elem.outerText;
// установим $elem текстовый контент
$elem.outerText = 'Текстовый контент...';

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

Например, заменим все элементы на текст :

<div class="container">
  <div>...</div>
  <img src="image-01.png" alt="...">
  <div>...</div>
  <img src="image-02.png" alt="...">
</div>

<script>
  // получим все элементы с тегом img
  const $elem = document.querySelectorAll('img');
  // переберём все найденные элементы
  $elem.forEach(($item) => {
    // заменим элемент на текст
    $item.outerText = 'Здесь было изображение';
  });
</script>

Объект события

Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.

Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

Пример ниже демонстрирует получение координат мыши из объекта события:

Некоторые свойства объекта :

Тип события, в данном случае .

Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у , но если обработчик является функцией-стрелкой или при помощи привязан другой объект в качестве , то мы можем получить элемент из .

Координаты курсора в момент клика относительно окна, для событий мыши.

Есть также и ряд других свойств, в зависимости от типа событий, которые мы разберём в дальнейших главах.

Объект события доступен и в HTML

При назначении обработчика в HTML, тоже можно использовать объект , вот так:

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: . То есть, её первый аргумент называется , а тело взято из атрибута.