Причина, по которой ваш HTML заменяется, связана с злой функцией JavaScript: document.write() .

Это определенно «плохая форма». Он работает только с веб-страницами, если вы используете его при загрузке страницы; и если вы используете его во время выполнения, он заменит весь документ на вход.

проблема:

document.write записывает в поток документов. Вызов document.write в закрытом (или загруженном) документе автоматически вызывает document.open , который очистит документ.

blockquote>

- цитата из MDN

document.write() имеет двух приспешников, document.open() и document.close() . Когда документ HTML загружается, документ «открыт». Когда документ закончил загрузку, документ «закрыт». Используя document.write() в этот момент, вы удалите весь (закрытый) HTML-документ и замените его новым (открытым) документом. Это означает, что ваша веб-страница стерла себя и начала писать новую страницу - с нуля.

Полагаю, что document.write() также приводит к снижению производительности браузера ( исправьте меня, если я ошибаюсь).

---

пример:

В этом примере записывается вывод в HTML-документ после загрузки страницы. Смотреть злые силы document.write() очищают весь документ, когда вы нажимаете кнопку «истребить»:

I am an ordinary HTML page.  I am innocent, and purely for informational purposes. Please do not 
me!

альтернативы:

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

Пример: document.getElementById('output1').innerHTML = 'Some text!';

• .createTextNode() является альтернативой, рекомендованной W3C .

Пример: var para = document.createElement('p'); para.appendChild(document.createTextNode('Hello, '));

ПРИМЕЧАНИЕ. Известно, что снижение производительности (медленнее, чем .innerHTML). Вместо этого рекомендую использовать .innerHTML.

---

пример с альтернативой .innerHTML:

I am an ordinary HTML page. 
I am innocent, and purely for informational purposes. 
Please do not 

 me!