Estaba haciendo esto para practicar, venía todo bien, de hecho funcionaba hasta que en los inputs donde uno ingresa la cancion, artista y tab, pongo el atributo autocomplete="off", pero lo saqué (como pueden ver en el código abajo) y sigue sin funcionar, el problema es que aparece el nuevo div, perfectamente como lo quiero, pero desaparece solo: inspecciono con las herramientas del navegador y efectivamente no está presente de ninguna manera. Por otro lado, no aparecen mensajes de error.
const btnAddItem= document.getElementById('btn-add'),
artist= document.getElementById('input-artist'),
song=document.getElementById('input-song'),
modal=document.querySelector('.modal-background'),
btnAddSong=document.getElementById('btn-add_song'),
tab=document.getElementById('input-tabs'),
form=document.getElementById('form');
btnAddItem.addEventListener('click',()=>{
var newSong= song.value;
var newArtist=artist.value;
var newTab= tab.value;
var newItem=document.createElement("DIV");
newItem.innerHTML=`
<div class="item">
<h3 class="song">${newSong}</h3>
<h3 class="artist">${newArtist}</h3>
<a class="link" href="${newTab}" target="_blank" ><h3>TABS</h3></a><input type="range" />
</div>`;
document.body.appendChild(newItem);
modal.style.display="none";
form.reset();
});
btnAddSong.addEventListener('click',function(){
modal.style.display="flex";
});
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Songs chart</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="title-container">
<h3>CHART</h3>
<button id="btn-add_song">Add</button>
</div>
<div class="modal-background">
<div class="modal">
<form id="form">
<input type="text" id="input-song" placeholder="Song" value="" />
<input type="text" id="input-artist" placeholder="Artist" value="" />
<input
type="text"
id="input-tabs"
placeholder="Link for TABS"
value=""
/>
<button id="btn-add">ADD</button>
</form>
</div>
</div>
</body>
<script src="main.js"></script>
</html>