Как работат метод document write в javascript?

Аватар пользователя Кирилл Маркеев
Кирилл Маркеев
14 января 2023

Метод document.write() служит для добавления контента в html-документ. Он может принимать строку с текстовым содержимым:

document.write('This text was added with document.write()');

Cтрока может содержать html-разметку:

document.write('<h1 style="color: red; text-align: center">Hello, World!</h1>');

Включая, например, стили для других элементов на странице:

document.write('<style>p { color: blue; }</style>');

Метод добавляет строку в текущее место html-документа, то есть туда, откуда он был вызван.

Посмотрим на все примеры одновременно. У нас есть следующий html-документ:

<body>
  <p>Start of content</p>
  <script>
    document.write('This text was added with document.write()');
    document.write('<h1 style="color: red; text-align: center">Hello, World!</h1>');
    document.write('<style>p { color: blue; }</style>');
  </script>
  <p>End of content</p>
</body>

На странице мы увидим следующее:

  • сначала текст Start of content синего цвета, так ниже через document.wtite() определяются стили для параграфов,
  • потом текст This text was added with document.write(), подставленный с помощью document.wtite(),
  • далее заголовок первого уровня, для которого мы указали красный цвет и выравнивание по центру,
  • в конце текст End of content синего цвета, так как он идёт уже после скрипта с document.wtite().

Также хотелось бы отметить, что с появлением таких методов, как innerHTML() и textContent(), метод document.wtite() считается устаревшим и не рекомендуется к использованию.

0 0
Познакомьтесь с основами JavaScript бесплатно