Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] insertar código html a través de javascript

Estas en el tema de insertar código html a través de javascript en el foro de Javascript en Foros del Web. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original <!DOCTYPE html> < html > < head > < title > Prueba de formulario < / title >   ...
  #1 (permalink)  
Antiguo 21/03/2017, 16:34
 
Fecha de Ingreso: enero-2016
Mensajes: 21
Antigüedad: 3 años, 10 meses
Puntos: 0
insertar código html a través de javascript

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <title>Prueba de formulario</title>
  3.  
  4.  
  5. </head>
  6.  
  7.  
  8. <script type="text/javascript">
  9. var elements = document.getElementsByTagName("li");                              
  10.         for (var i=0; i<elements.length; i++){
  11.              
  12.             var UnBoton = document.createTextNode ('<input type="button" name="boton7" value=" 7 ">');
  13.            
  14.             elements[i].appendChild(UnBoton);
  15.         }
  16.  
  17.  
  18. <form action="registrardatos.php" method="post">
  19. <h1>Resultado:<h1>
  20. <input type="button" name="boton7" value=" 7 ">
  21. <input type="button" name="boton8" value=" 8 ">
  22.  
  23. <input type="button" name="boton9" value=" 9 ">
  24.  
  25. <input type="button" name="botondiv" value=" / ">
  26. <br>
  27. <input type="button" name="boton4" value=" 4 ">
  28. <input type="button" name="boton5" value=" 5 ">
  29. <input type="button" name="boton6" value=" 6 ">
  30. <input type="button" name="botondiv" value=" * ">
  31. <br>
  32. <input type="button" name="boton1" value=" 1 ">
  33. <input type="button" name="boton2" value=" 2 ">
  34. <input type="button" name="boton3" value=" 3 ">
  35. <input type="button" name="botonmas" value=" + ">
  36. <br>
  37. <input type="button" name="boton0" value=" 0 ">
  38. <input type="button" name="botonigual" value=" = ">
  39. <input type="button" name="botonmenos" value=" - ">
  40. </form>
  41.  
  42. <ul>
  43. <li>
  44. <input type="button" name="boton7" value=" 7 ">
  45.  
  46. </li>
  47. </ul>
  48. </body>
  49. </html>
La parte de html de este código funciona bien, sin problemas. La parte de javascript no funciona y no sé por qué.
Si abro la página con el firefox sin la parte de javascript y luego a través del shell pruebo la parte de javascript funciona... pero así tal cual está no funciona.. no lo entiendo.. debería ser igual.. no lo sé.
Luego además, como se ve en el código, lo que quiero es insertar el código html para poner un botón pero cuando lo pruebo en el shell aparec el código en html pero no interpretado con el navegador.. por lo que no aparece el botón...
Gracias a cualquiera que pueda orientarme en estas dos cuestiones :)
  #2 (permalink)  
Antiguo 21/03/2017, 16:45
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.431
Antigüedad: 8 años
Puntos: 930
Respuesta: insertar código html a través de javascript

Estás ejecutando el código JavaScript antes de que se carguen los elementos HTML; por eso no funciona cuando lo colocas directamente y sí cuando usas la consola, porque ya cargó el DOM.

Apóyate utilizando el evento DOMContentLoaded:
Código Javascript:
Ver original
  1. document.addEventListener("DOMContentLoaded", function(){
  2.     //Acá ejecutas tu código
  3. }, false);

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #3 (permalink)  
Antiguo 21/03/2017, 20:00
 
Fecha de Ingreso: enero-2016
Mensajes: 21
Antigüedad: 3 años, 10 meses
Puntos: 0
Respuesta: insertar código html a través de javascript

Gracias, ahora sí funciona :)

Qué hay de la otra parte? por qué aparece el código html como texto y no lo interpreta el navegador?
  #4 (permalink)  
Antiguo 22/03/2017, 00:41
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Lima, Perú
Mensajes: 5.431
Antigüedad: 8 años
Puntos: 930
Respuesta: insertar código html a través de javascript

Porque solo estás creando un nodo de texto, lo cual no es lo mismo que insertar un elemento <input>, que es lo que pretendes. Básicamente estás creando un nodo de texto cuyo texto es dicha línea de código HTML, que es lo que terminas viendo.

Apóyate usando el método .insertAdjacentHTML():
Código Javascript:
Ver original
  1. elements[i].insertAdjacentHTML("beforeend", "<input type='button' name='boton7' value='7' />");

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #5 (permalink)  
Antiguo 22/03/2017, 05:39
 
Fecha de Ingreso: enero-2016
Mensajes: 21
Antigüedad: 3 años, 10 meses
Puntos: 0
Respuesta: insertar código html a través de javascript

Funciona perfectamente. Gracias :)

Etiquetas: boton, button, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:56.