Всем привет. Учу 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>`);
}
})