visibility mit Javascript ändern 2

Hallo zusammen, ich möchte von der Zeile 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
per js die visibility ändern. Versucht habe ich es mit 
function add() {
document.getElementById("opt").style.visibility = "visible";
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
die per Button aufgerufen wird. Das lässt die Zeile aber nur kurz aufblitzen und direkt wieder verschwinden. Was mache ich falsch?
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<body>
<table>
<tr>
<td>Vorname <input type="text" id="vn0"></td>
<td>Nachname: <input type="text" id="nn0"></td>
</tr>
</table>
<button onclick="add()">Weitere Reihe hinzufügen</button>
</body>
<script>
function add(){
i=1;
var newLI = document.createElement('tr');
var liNummer = i + 1;
newLI.innerHTML='<td>Vorname:<input type="text" id="vn2"+i value=""></td><td>Nachname: <input type="text" id="nn"+i></td>';
document.getElementsByTagName('table')[0].appendChild(newLI);
}
</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX