JavaScript - Crear un div dentro de body (estructura de nodos dinamicamente)

 
Vista:
Imágen de perfil de Juan Jose
Val: 13
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear un div dentro de body (estructura de nodos dinamicamente)

Publicado por Juan Jose (8 intervenciones) el 27/02/2017 18:59:37
Hola todos , estoy empezando a aprender a crear nodos con javascript dinamicamente, y estoy realizando este ejercicio:

Tengo que generar a partir de este codigo un div , y dentro de el un titulo con una frase:

La estructura de la que parto es la siguiente:

1
2
3
4
5
<html>
    <body>
        <script src="javascript.js"></script>
    </body>
</html>

y tengo que conseguir esto:

1
2
3
4
5
6
7
8
9
10
<body>
        <script src="javascript.js"></script>
 
        <div class="contenedora">
                <header>
                      <h1>INICIO</h1>
                </header>
 
    </body>
</html>


Pues bien este es el codigo de javascript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
alert("escribo");
 
//contenedor div y asignacion del atributo
var divcontenedora = document.createElement("div");
var atributo= document.createAttribute("class");
atributo.value="contenedora";
divcontenedora.setAttributeNode(atributo);
 
//creacion del header
var head = document.createElement("header");
 
//lo añado al div
divcontenedora.appendChild(head);
 
//h1 titulo
var h1tit=document.createElement("h1");
var textoH1=document.createTextNode("INICIO");
h1tit.appendChild(textoH1);
 
//y lo añado al header
head.appendChild(h1tit);

pero la cuestion es que me aparece el alert de escribo pero no consigo que me cree el div ni el titulo. no se si el error estara en hacer appendchild al contenedor div al body.

¿Me podeis ayudar?
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 482
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear un div dentro de body (estructura de nodos dinamicamente)

Publicado por Alejandro (126 intervenciones) el 28/02/2017 01:33:19
Hola Juan Jose, efectivamente te falto agregar el div a el body, agrega esta linea de codigo al final de tu script.

1
document.body.appendChild(divcontenedora);

Un Saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Juan Jose
Val: 13
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear un div dentro de body (estructura de nodos dinamicamente)

Publicado por Juan Jose (8 intervenciones) el 28/02/2017 18:35:56
muchas gracias, era eso lo que me faltaba.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Juan Jose
Val: 13
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear un div dentro de body (estructura de nodos dinamicamente)

Publicado por Juan Jose (8 intervenciones) el 28/02/2017 20:28:34
ahora me encuentro con otro problema:

con la misma estructura vista antes:

1
2
3
4
5
<html>
    <body>
        <script src="javascript.js"></script>
    </body>
</html>

quiero incluir en la web una etiqueta head para incluir una etiqueta meta que lea los caracteres especiales

es decir esto:

1
2
3
4
5
6
7
8
<html>
    <head>
        <meta charset="utf-8"><meta>
    </head>
    <body>
        <script src="javascript.js"></script>
    </body>
</html>

pero no se como referenciar fuera de la etiqueta body, para que la cree.

ya tengo el codigo javacript hecho y creo que esta bien:
este es el codigo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var cabecera=document.createElement("head");
 
//etiqueta meta
var metaetiqueta=document.createElement("meta");
var meta= document.createAttribute("meta");
meta.value="charset";
metaetiqueta.setAttributeNode(meta);
 
//y modificamos el atributo
metaetiqueta.setAttribute("charset","utf-8");
 
//añadimos la etiqueta a la cabecera
cabecera.appendChild(metaetiqueta);
 
// OJO y añadimos la cabecera al documento esta linea no funciona
document.html.appendChild(cabecera);

Me puedes ayudar?¿Es poslbie referenciar la etiqueta html
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 482
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear un div dentro de body (estructura de nodos dinamicamente)

Publicado por Alejandro (126 intervenciones) el 01/03/2017 01:42:36
Hola Juan Jose, prueba con esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Compruebo si existe el elemento <head> ya que el navegador 
// lo puede crear por defecto si no lo encuentra en el código.
var cabecera = document.getElementsByTagName('head')[0];
var existe = true;
if (cabecera === null) {
    cabecera = document.createElement("head");
    existe = false;
}
 
//etiqueta meta
var metaetiqueta = document.createElement("meta");
var meta = document.createAttribute("meta");
meta.value = "charset";
metaetiqueta.setAttributeNode(meta);
 
//y modificamos el atributo
metaetiqueta.setAttribute("charset", "utf-8");
 
//añadimos la etiqueta a la cabecera
cabecera.appendChild(metaetiqueta);
 
if (!existe) {
    document.getElementsByTagName('html')[0].appendChild(cabecera);
}

Un Saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar