I am currently trying to get some data from an online json element generator, which generates random users data. I want to manipulate this data and put it in the middle of my "contacts" page.
Everything is going well, the only problem I'm facing is that I don't know how to put this div, which I creat in JS, in the middle of my page, as it appears always after the footer. I already tried to create a div in the html template and in the JS append a child to this div, but it doesn't work.
Thanks in advance.
getResultado();
function getResultado() {
fetch("https://randomuser.me/api/")
.then(function(response) {
return response.json();
}).then(function(json) {
for (var i =0; i<json.results.length; i++) {
console.log(json.results[i]);
obj = json.results[i];
document.body.appendChild(contactos(obj));
}
});
}
function contactos(info){
let contactos = document.createElement("div");
contactos.classList.add("contactos");
let contacto = document.createElement("div");
contacto.classList.add("contacto");
let titulo = document.createElement("h3");
titulo.innerText = "Geral";
let nome = document.createElement("p");
nome.innerText = info.name.first;
let mail = document.createElement("p");
mail.innerText = info.email;
let json = document.getElementById("json");
json.appendChild(contactos);
contactos.appendChild(contacto);
contacto.appendChild(titulo);
contacto.appendChild(nome);
contacto.appendChild(mail);
return contactos;
}<!DOCTYPE html><html lang="en"><head><script src="JS/json.js"></script><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://fonts.googleapis.com/css?family=Fahkwang&display=swap" rel="stylesheet"><meta charset="UTF-8"><title>Contactos</title><link rel="stylesheet" type="text/css" href="CSS/stylesheet.css"><link rel="stylesheet" type="text/css" href="CSS/contactos.css"></head><body><header><div class="header"><div class="logo"><a href="home.html"><img width="100" height="100" src="imagens/qf.png" alt="logo"></a></div><div class="barras" onclick="anim(this); abrir()"><div id="barra1"></div><div id="barra2"></div><div id="barra3"></div></div><div class="links"><a href="cartaz.html">CARTAZ</a><a href="historia.html">HISTÓRIA</a><a href="contactos.html">VOLUNTARIA-TE</a><a
href="loja.html">LOJA</a></div></div></header><main><div class="titulo"><h1>Voluntaria-te</h1></div><form><label for="pnome" class="titulo">Primeiro Nome</label><input type="text" id="pnome" name="pnome" placeholder="O seu primeiro nome..."><label for="unome" class="titulo">Apelido</label><input type="text" id="unome" name="unome" placeholder="O seu ultimo nome..."><label for="telemovel" class="titulo">Telemóvel:</label><input type="tel" id="telemovel" name="usuario_telemovel" placeholder="O seu número de telemóvel..."><label for="profissão" class="titulo">Profissão:</label><input type="text" id="profissão" name="usuario_profissão" placeholder="A sua profissão..."><label for="país" class="titulo">País de Nascimento</label><select id="país" name="país"><option value="portugal">Portugal</option><option value="espanha">Espanha</option><option value="frança">França</option></select><label for="data" class="titulo">Data de Nascimento</label><input type="date" id="data" name="data"><label for="carta" class="titulo">Carta de Motivação:</label><textarea id="carta" placeholder="Qual a importância desta experiência para si?"></textarea><input type="submit" value="Submeter"></form><div id="json"></div></main><footer><div id="redes"><a href="https://www.facebook.com/queimadasfitascoimbra/" target="_blank"><img width="40" height="40"
src="imagens/fb.png"
alt="fb"></a><a href="https://www.instagram.com/queimadasfitascoimbra/" target="_blank"><img width="40" height="40"
src="imagens/insta.png"
alt="insta"></a><a href="https://twitter.com/queimacoimbra" target="_blank"><img width="40" height="40" src="imagens/tt.png"
alt="tt"></a></div><div><address>
E-mail: queimadasfitascoimbra.pt <br>
Morada:Rua Padre António Vieira, 1 3000-315 Coimbra <br></address></div></footer><script src="JS/menu.js"></script></body></html>