2

Имеется функция которая пишет строчку (document.write).
Она вызывается через setInterval().
Почему setInterval удаляет все HTML элементы вместо того чтобы добавлять текст к ним?

var seconds = 1;

function repeatWrite(){
  document.write(seconds + " seconds left" + "<br>");
  seconds++
}

setInterval(repeatWrite, 1000);
<h1>Появляющийся текст!</h1>
<p>Каждую секунду ниже должен появляться текст</p>
<p>Но почему все эти HTML элементы исчезают?</p>

3
  • Потому что надо хоть немного изучить язык, прежде, чем на нём писать. document.write заменяет содержимое документа.
    – user207618
    1 мар 2017 в 19:44
  • Не используйте document.write в 2017 году, пожалуйста
    – andreymal
    1 мар 2017 в 19:51
  • ассоциация: stackoverflow.com/questions/40749856
    – mymedia
    1 мар 2017 в 20:49

2 ответа 2

3

Методы document.write и document.writeln работают только пока HTML-страница находится в процессе загрузки. Если страница загружена, то document.write() уже не может ничего добавить на страницу

Технически, вызвать document.write можно в любое время, однако, когда HTML загрузился, и браузер полностью построил DOM, документ становится «закрытым». Попытка дописать что-то в закрытый документ открывает его заново. При этом все текущее содержимое удаляется.

Из-за этой особенности document.write для загруженных документов не используют. Вместо этого используйте innerHTML

var seconds = 1;

function repeatWrite(){
  document.getElementById('add').innerHTML += (seconds + " seconds left" + "<br>");
  seconds++
}

setInterval(repeatWrite, 1000);
<h1>Появляющийся текст!</h1>
<p>Каждую секунду ниже должен появляться текст</p>
<p>Но почему все эти HTML элементы исчезают?</p>
<p id="add"></p>

Источник

9
  • Я в процессе изучения JS, но с этой проблемой столкнулся только когда вызвал функцию с document.write через setInterval. До этого document.write добавлял текст к HTML, и таких проблем не было. Вот пример, который только что сделал: code.sololearn.com/WJA9SV1jLoac/#js
    – Rumata
    1 мар 2017 в 19:58
  • @Rumata Читайте еще раз, я все объяснил. Если не понятно - читайте в источнике, там подробнее.
    – Crantisz
    1 мар 2017 в 20:00
  • Хотя если заключить document.write в функцию window.onload снова все сотрется. То есть дело в том подгружается ли JS после или до HTML? снова странно - ведь я подключил внешний js файл в конце body, а значит должно получиться так же как с window.onload
    – Rumata
    1 мар 2017 в 20:00
  • Метод document.write() работает только пока HTML-страница находится в процессе загрузки. Если страница загружена (onload), то document.write() уже не может ничего добавить на страницу
    – Crantisz
    1 мар 2017 в 20:03
  • Поэтому страница снова "открывается", чтобы document.write сработал, и все созданное до него стирается, верно?
    – Rumata
    1 мар 2017 в 20:05
2

document.write пишет в поток документа, первый же вызов очищает весь DOM(переоткрывает документ), это нормальное поведение.

Используйте другие методы.

var seconds = 1;

function repeatWrite(){
  document.body.innerHTML += ("<br/>"+seconds + " seconds left");
  seconds++
}

setInterval(repeatWrite, 1000);
<h1>Появляющийся текст!</h1>
<p>Каждую секунду ниже должен появляться текст</p>
<p>Но почему все эти HTML элементы исчезают?</p>

4
  • Я в процессе изучения JS, но с этой проблемой столкнулся только когда вызвал функцию с document.write через setInterval. До этого document.write добавлял текст к HTML, и таких проблем не было. Вот пример, который только что сделал: code.sololearn.com/WJA9SV1jLoac/#js
    – Rumata
    1 мар 2017 в 19:59
  • В вашем примере document.write вызывается до формирования DOM
    – vp_arth
    1 мар 2017 в 20:06
  • Спасибо большое! Я еще изучаю JS, многое пока не вполне понятно)
    – Rumata
    1 мар 2017 в 20:12
  • Строго говоря, document - не является частью js) Это часть DOM
    – vp_arth
    1 мар 2017 в 20:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.