Página 1 de 1

Introducir elementos HTML

NotaPublicado: 2009-05-06 16:19 @721
por Perl
Hola de nuevo, quizás pregunte más de lo políticamente correcto pero estoy en las primeras fases y espero que ahora que estoy empezando a entrar en el asunto pueda ser más autosuficiente.

He estado buscando la manera de mediante JavaScript incluir elementos HTML dentro de otro elementos ya creados en el HTML y no he encontrado nada sobre el asunto, una vez más agradecería de antemano vuestra ayuda acerca de cómo implementar esto. Un saludo.

NotaPublicado: 2009-05-06 16:29 @728
por kidd
Usando innerHTML puedes hacer lo que quieres:

http://www.w3schools.com/htmldom/prop_a ... erhtml.asp

Saludos

NotaPublicado: 2009-05-07 03:51 @202
por Perl
Lo he implementado bien pero el asunto es que quería hacerlo con un bucle para hacer varios hijos iguales.
El caso es el de una tabla a la que le quiero poner 50 celdillas iguales y al implementarlo con un bucle 'for' solo me muestra la primera no haciendo el bucle:

Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
tabla_1 = document.getElementById('td_1');
        for ( var i = 0; i < 50; i++ )
        {
                tabla_1.innerHTML ='<td>....</td>';
        }
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4

NotaPublicado: 2009-05-07 05:02 @251
por explorer
¿Por qué no pruebas a crear el código de las 50 celdas en una variable de cadena de caracteres y luego lo asignas de golpe con un solo innerHTML?

NotaPublicado: 2009-05-07 05:10 @257
por Perl
Porque también podría poner 50 veces <td></td> en el propio documento HTML pero es que tengo que manipular el número de celdillas ya que no van a ser siempre 50 sino que puede variar.

NotaPublicado: 2009-05-07 06:48 @325
por explorer
Pues eso... haces un bucle que vaya agregando el código HTML de cada celda a una variable string. Y luego haces una sola llamada a innerHTML().

NotaPublicado: 2009-05-07 09:03 @419
por kidd
Tiene razón explorer. Lo que pasa es que con cada llamada que estás haciendo a innerHTML estás sustituyendo el valor actual.

Debes de hacer algo así:

Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
var tabla_1 = document.getElementById('td_1');

var celdas = '';

for ( var i = 0; i < 50; i++ ){
    celdas = celdas + '<td>...</td>';
}

tabla_1.innerHTML = celdas;
Coloreado en 0.000 segundos, usando GeSHi 1.0.8.4

NotaPublicado: 2009-05-07 09:55 @455
por danimera
La función clone node de JavaScript para eso.

NotaPublicado: 2009-05-07 19:50 @868
por elnico
Esta bien tu respuesta, danis, pero por ahí le quiere agregar algo más a las celdas. Yo diría que la mejor opción es la elegida por kidd.
Saludos.

NotaPublicado: 2009-05-08 11:50 @534
por Perl
Lo que ha expuesto Kidd es lo que pensaba que me quería decir Explorer lo que pasa es que no lo he sabido implementar bien pero he adaptado el código de Kidd y va a placer.