lo mismo que tienes pero con cloneNode. de nuevo, la ventaja es evitarse tener que crear los elementos uno a uno, y por ende, simplificacion de codigo.
Código:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>
self.onload = function(){
var product = document.getElementById("productos");
clone = product.firstChild.cloneNode(true);
// si no deseas eliminar la primera fila cuando cargue el documento,
// comenta o elimina la siguiente linea;
product.removeChild(product.firstChild);
}
function crear(){
document.getElementById("productos").appendChild(clone.cloneNode(true));
}
function borrar(elem){
var parent = elem.parentNode;
parent.parentNode.removeChild(parent);
}
</script>
<style type='text/css'>
span{
cursor:pointer;
}
</style>
</head>
<body><form>
<div id="productos"><p>
<input type="text" size="5" name="_default_host[]" />
<input type="text" size="30" name="_default_host[]" />
<input type="text" size="5" name="_default_host[]" />
<input type="text" size="5" name="_default_host[]" />
<span onclick="borrar(this)">Eliminar</span></p>
</div>
</form>
<span title="Añadir otra fila" class="addlink" onclick="crear()">Añadir</span>
</body></html>