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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    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";
        
    });

<!-- language: lang-html -->

    <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>

<!-- end snippet -->