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

antonio715715 · #1 (**permalink**) 21/03/2017, 15:34

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<title>Prueba de formulario</title>
 
 
</head>
 
 
<body>
<script type="text/javascript">
var elements = document.getElementsByTagName("li");                              
        for (var i=0; i<elements.length; i++){
             
            var UnBoton = document.createTextNode ('<input type="button" name="boton7" value=" 7 ">');
            
            elements[i].appendChild(UnBoton);
        }
</script>
 
 
<form action="registrardatos.php" method="post">
<h1>Resultado:<h1>
<input type="button" name="boton7" value=" 7 ">
<input type="button" name="boton8" value=" 8 ">
 
<input type="button" name="boton9" value=" 9 ">
 
<input type="button" name="botondiv" value=" / ">
<br>
<input type="button" name="boton4" value=" 4 ">
<input type="button" name="boton5" value=" 5 ">
<input type="button" name="boton6" value=" 6 ">
<input type="button" name="botondiv" value=" * ">
<br>
<input type="button" name="boton1" value=" 1 ">
<input type="button" name="boton2" value=" 2 ">
<input type="button" name="boton3" value=" 3 ">
<input type="button" name="botonmas" value=" + ">
<br>
<input type="button" name="boton0" value=" 0 ">
<input type="button" name="botonigual" value=" = ">
<input type="button" name="botonmenos" value=" - ">
</form>
 
<ul>
<li>
<input type="button" name="boton7" value=" 7 ">
 
</li>
</ul>
</body>
</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 :)

Alexis88 · #2 (**permalink**) 21/03/2017, 15:45

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 originaldocument.addEventListener("DOMContentLoaded", function(){
    //Acá ejecutas tu código
}, false);

antonio715715 · #3 (**permalink**) 21/03/2017, 19:00

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?

Alexis88 · #4 (**permalink**) 21/03/2017, 23:41

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 originalelements[i].insertAdjacentHTML("beforeend", "<input type='button' name='boton7' value='7' />");

antonio715715 · #5 (**permalink**) 22/03/2017, 04:39

Funciona perfectamente. Gracias :)