Почему document.write() стирает теги?

Question

[Роман]

Всем привет. Учу js. Задача: в инпут через запятую вводятся страны и при нажатии на кнопку нужно вывести список под инпутом. Нельзя делать через display: none;. Мой код удаляет теги инпут. Почему это происходит и как сделать правильно?

<input type="text" id="country">
<input type="submit" id="btn">

let country = document.querySelector('#country');
let btn = document.querySelector('#btn');

btn.addEventListener('click', function(){
	let arrCountries = country.value.split(',');
	if (arrCountries.length > 1) {
		document.write(`<ul>`);
		for (var i = 0; i < arrCountries.length; i++) {
			document.write(`<li>${arrCountries[i]}</li>`);
		}
		document.write(`</ul>`);
	} else {
		document.write(`<ul><li>${arrCountries[0]}</li></ul>`);
	}
})

Answer 1

[FinGanapre]

Вы перезаписываете содержимое страницы.

Лучше так:
insertAdjacentHTML

Answer 2

[Владимир]

https://developer.mozilla.org/en-US/docs/Web/API/D...
Почитай а потом внимательно на пример посмотри.
Ну и в придачу
https://developer.mozilla.org/en-US/docs/Web/API/D...