Справочники, инструменты, документация

JavaScript: Вывод данных

У JavaScript есть несколько различных способов отобразить данные.
  • Запись в HTML элемент при помощи свойства innerHTML.
  • Запись в вывод HTML при помощи метода document.write().
  • Запись в окно предупреждений при помощи метода window.alert().
  • Запись в консоль браузера при помощи метода console.log().

Использование innerHTML

Чтобы получить доступ к HTML элементу, JavaScript должен воспользоваться методом document.getElementById(id). Атрибут id определяет идентификатор HTML элемента. Свойство innerHTML определяет выводимый HTML контент:

<!DOCTYPE html>
<html>
<body>

<h1>Моя веб-страница</h1>
<p>Первый параграф</p>

<p id="demo"></p>

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

Изменение свойства innerHTML элемента HTML это обычный способ вывода данных в HTML.

Использование document.write()

В тестовых целях для вывода данных можно использовать метод document.write():

<!DOCTYPE html>
<html>
<body>

<h1>Моя веб-страница</h1>
<p>Первый параграф</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Следует помнить, что использование метода document.write() после полной загрузки HTML документа удалит весь существующий HTML код:

<!DOCTYPE html>
<html>
<body>

<h1>Моя веб-страница</h1>
<p>Первый параграф</p>

<button type="button" onclick="document.write(5 + 6)">Попробуй</button>

</body>
</html>

Метод document.write() следует использовать только для тестирования.

Использование window.alert()

Для отображения данных также можно использовать окно сообщений. Для этого нужно воспользоваться методом window.alert():

<!DOCTYPE html>
<html>
<body>

<h1>Моя веб-страница</h1>
<p>Первый параграф</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

Использование console.log()

Во время отладки скрипта, чтобы увидеть некие данные, вы можете вывести их в консоль браузера. Для этого используется метод console.log():

<!DOCTYPE html>
<html>
<body>

<script>
 console.log(5 + 6);
</script>

</body>
</html>
На этой странице