Sono alle prime armi con la programmazione html/javascript, facendo delle prove mi sono soffermato su un piccolo problema che non riesco a risolvere.
Il problema è questo:
Premendo un bottone vorrei aggiungere (una sotto l'altra) delle caselle di testo inserite all'interno di un tag div.
Attualmente quando vado a premere il tasto "aggiungi campo" mi sparisce tutto e mi viene visualizzato solamente il campo restituito dalla funzione inserisci().

il codice html/javascript è il seguente:

codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>prova</title>
<link href="prov.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript">
function inserisci(){
        document.write("<input type='text' name='terzo' id='ter'/>")
        return;
        }        
</script>
</head>

<body>
<div id="mio">
<input type='text' name='terzo' id='ter'/>
</div>
<div class="pippo">
<input type="button" value="aggiungi campo" onclick="inserisci()" />

</div>
</body>
</html>
il codice del file CSS esterno è il seguente:

codice:
body {
    width:500px;
    height:500px;
    border:solid 1px black;
    }        
#mio {
    width:250px;
    height:250px;
    border:solid 1px black;
    }


Ringrazio anticipatamente per l'eventuale risposta.