Crear elementos con javascript

[JAI_ME]

buenas tardes tengo el siguiente archivo html.

<div id=divjugadores>
<form id=fjugadores name=fjugadores>

<div id=divcontenidojugadores>
<table><tr>
<td>equipo por defecto</td><td><select name=cbequipodefecto id=cbequipodefecto><option value="1">seleccione el equipo</option></select></td>
</tr>
</table>

<div id=divjugadoresline>
<table>
<tr><td align="right">Nombres: *</td><td><input name=ednom1 id="ednom" type=text maxlength=30/></td></tr>
<tr><td align="right">Apellidos: *</td><td><input name=edape1 id=edape type=text maxlength=30/></td></tr>
<tr><td align="right">Identificación: *</td><td><input name=ediden1 id=ediden type=text maxlength=15/></td></tr>
<tr><td align="right">Dirección:</td><td><input name=eddir1 id=eddir type=text maxlength=30/></td></tr>
<tr><td align="right">Teléfono:</td><td><input name=edtel1 id=edtel type=text maxlength=21/></td></tr>
<tr><td align="right">Fecha de nacimiento:</td><td><input name=edfec1 id=edfec type=text maxlength=30/></td></tr>
<tr><td align="right">Equipo al que pertenece: *</td><td><select name=cbfecha id=cbfecha><option value="1">seleccione el equipo</option></select></td></tr>

</table>
</div>

</div>
<input type="button" value="Crear" onclick="crear(this)" /></form>
</div>

lo que quiero es que al dar clic en un boton "crear" cree una nueva tabla con todos los elementos anteriormente descritos justo debajo de la misma y asi sucesivamente las veces que el usuario lo desee.

en java tengo el siguiente codigo que me permite crear elelmentos, asi :

function crear(obj) {

fi = document.getElementById('divcontenidojugadores');

contenedor = document.createElement('div');
contenedor.id = 'divjugadoresline';
fi.appendChild(contenedor);
}

pero no se como agregar una tabla completa como la que les mostre.

les agradesco su ayuda.

[_cronos2]

Los id y los name tienen que ir entrecomillados. Para hacer eso creo que vale este código:

Código Javascript:

function crear(c){
 var clon = c.previousSibling.cloneNode(true);
 c.previousSibling.appendChild(clon);
}
 

Si no te funciona dímelo, porque no estoy seguro de si el código es así.
Saludos (:

[JAI_ME]

Gracias _cronos2 por su respuesta pero si hago una copia de la tabla de arriba copia todos los elementos iguales cierto ? yo necesito crear todos los elementos pero con nombres diferentes para cuando valla a guardar en la bd diferenciarlos.

pero en todo caso que valor le paso a la funcion crear(?) quien es c ?
Gracias.

[_cronos2]

Pues entonces ya es , más que complicado, bastante más largo. Tienes que definir cada tabla, td, tr, input... y sus propiedades, o bien usar innerHTML y cambiar los ids y los names, que supongo que es lo más factible. Para eso sería una función así:

Código Javascript:

var n = 2;
function crear(id){
 document.geElementById(id).innerHTML += '<table><tr>
<td>equipo por defecto</td><td><select name=cbequipodefecto id=cbequipodefecto><option value="1">seleccione el equipo</option></select></td>
</tr>
</table>
 
<div id=divjugadoresline>
<table>
<tr><td align="right">Nombres: *</td><td><input name=ednom'+n+' id="ednom" type=text maxlength=30/></td></tr>
<tr><td align="right">Apellidos: *</td><td><input name=edape'+n+' id=edape type=text maxlength=30/></td></tr>
<tr><td align="right">Identificación: *</td><td><input name=ediden'+n+' id=ediden type=text maxlength=15/></td></tr>
<!-- etc, etc -->
</table>';
 n++;
}
 

Evidentemente, a los atributos tendrías que ponerles comillas pero en este caso sólo podrías poner las dobles ("), porque las simples son las que definen el innerHTML. Lo de crear(c), ahí c es un argumento que se le pasa a la función, en la función no significa nada, pero cuando vas a ejecutar la función (onclick='crear(this);'), donde estaba c se cambia por el argumento que le pases, en este caso this, por tanto cambiaría c.previousSibling por this.previousSibling, y así sucesivamente.
Saludos (:

[JAI_ME]

muchas gracias de nuevo, pero el codigo que me envias hay no me funciona me sacar error, pero no se donde podrias revisarlo, gracias

var n = 2;
function crear(id){

document.geElementById(id).innerHTML += '
<div id=divjugadoresline>
<table>
<tr><td align="right">Nombres: *</td><td><input name=ednom'+n+' id="ednom" type=text maxlength=30/></td></tr>
<tr><td align="right">Apellidos: *</td><td><input name=edape'+n+' id=edape type=text maxlength=30/></td></tr>
<tr><td align="right">Identificación: *</td><td><input name=ediden'+n+' id=ediden type=text maxlength=15/></td></tr>
</table>';

n++;

}

[_cronos2]

¿Qué error te da? Míralo en la consola de errores. Y pon las comillas a los atributos, porque a lo mejor es por eso.

[JAI_ME]

este es el error,
Error: unterminated string literal
Archivo de origen: http://localhost/script.js
Línea: 594, columna: 40
Código fuente: document.geElementById(id).innerHTML += '

gracias me marca la comilla

[JAI_ME]

Gracias amigo ya solucione el problema, la idea ahora es que uno de los elementos creados es un <select> y las opciones de éste deben ser el resultado de una consulta, he hecho esto
document.geElementById(id).innerHTML += 'otros elementos <?php consultaSQL ?>'; le paso al innerHTML el php necesario pero no me funciona, como puedo hacer esto ? o se podria hacer para cumplir mi requerimiento ?

gracias de nuevo.

[_cronos2]

No tengo ni idea, si viene alguien que sepa más que yo, o si no prueba en el foro de PHP, aunque no creo que el problema sea de eso.
Saludos (: