¿Cómo hago una etiqueta de entrada dentro de un div

<!DOCTYPE html>

<html>

    <head>
        <script>
            var x = document.createElement("INPUT");
            x.setAttribute("type", "text");
            document.body.appendChild(x);
        </script>
    </head>

    <body>
       <div>
           Test
       </div>
    </body>

</html>

¿Cómo puedo agregar la etiqueta de entrada al div

0
PG_ 25 dic. 2019 a las 00:29

2 respuestas

Asumiendo que su div objetivo tiene una identificación de p. Ej. target, puedes usar document.createElement así:

var div = document.getElementById("target");
var input = document.createElement("input");

//setting the input's properties, e.g.:
input.type="text";
input.name="my_input";

//adding the input to the div
div.appendChild(input);

Nota: para que getElementById funcione, deberá colocar el script al final del archivo o envolverlo en un evento onload, por ejemplo:

onload = function() {
  //insert code here
}
0
Anis R. 24 dic. 2019 a las 21:43

En primer lugar, debe identificar de alguna manera ese div específico entre todos sus div s (potencialmente muchos). Puede hacerlo de muchas maneras, posiblemente la más común: dándole al elemento div un atributo class y / o un atributo id, así:

  • <div class="name-of-the-class"></div>
  • <div id="name-of-the-id"></div>

Supongamos que elige asignar una clase al div en el que desea insertar un elemento input. Entonces su código div se vería así:

<div class="test-class">
    Test
</div>

Ahora podemos preguntarnos: ¿dónde queremos poner nuestro elemento input? ¿Queremos hacerlo directamente en el cuerpo del documento como esta línea sugiere document.body.appendChild(x);? No, queremos ponerlo en div, que está en el cuerpo del documento.

Podemos hacerlo encontrando primero el div (que ahora podemos identificar sin problemas) y luego agregando nuestro elemento:

document.body.querySelector(".test-class").appendChild(x);

Desafortunadamente, eso no es todo lo que necesita ser arreglado en su código. Como javascript y html se interpretan línea por línea, de arriba abajo, cuando se ejecuta el script, ¡el elemento div elegido aún no se ha creado!

Podemos solucionarlo fácilmente moviendo el script en la parte inferior de nuestro cuerpo html. De esa manera, todo lo que pongamos en nuestra página será visible si necesitamos manipularlo con JavaScript. La solución completa se vería así:

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
       <div class="test-class">
           Test
       </div>

       <script>
           var x = document.createElement("INPUT");
           x.setAttribute("type", "text");
           document.body.querySelector(".test-class").appendChild(x);
       </script>
    </body>
</html>
1
Pajacar123 24 dic. 2019 a las 22:17