Contenu de div apparait et disparait rapidement javascript

Bonjour,

J'ai deux petits problèmes que je n'arrive pas à résoudre. Je veux que lorsqu'on introduit une chaine de caractère, on mémorise cette dernière dans un tableau et par la suite à chaque fois que l'utilisateur clique sur le bouton ok la chaine s'envoie au fichier javascript qui la réccupére , insère dans un tableau et renvoie le tableau pour qu'il soit affiché dans un div /overflow.
Le premier problème est que lorsque j'écris de nouveau une chaine de caractère, je perds l'ancienne même si j'utilise la méthode push() qui doit insérer les nouveaux élements à la fin du tableau. Autrement dit, je ne vois que la nouvelle chaine saisie sur la console.
Le deuxième est que cet élément du tableau s'affiche et disparait rapidement après le clic sur le bouton OK. et je n'arrive pas à trouver une explication à ça.
Quelqu'un peut m'aider svp? merci.

Voilà les codes correspondants:
HTML:

<bold> Choisissez les voisins: <input type="textarea" id="nom_voisin" name="nom_voisin">
  <button onclick="valider();"> OK </button>
  <p><div id="dmcscroll"/> </p>
  </fieldset>
<underline></bold>

<bold>CSS:</bold></underline>
<bold>#dmcscroll{
background-color:#E6E6E6;
width:200px;
height:100px;
overflow:scroll;
}</bold>

JS:

<bold>var array_neighbours=[];
var nom_voisin;
var elem=document.getElementById("dmcscroll");

function valider(){
    nom_voisin=document.getElementById("nom_voisin").value;
     array_neighbours.push(nom_voisin);
     elem.innerHTML=array_neighbours;
    console.log(array_neighbours);
}
</bold>