我目前正在尝试从在线json元素生成器获取一些数据，该生成器会生成随机用户数据。我想操纵这些数据并将其放在“联系人”页面的中间。
一切进展顺利，我面临的唯一问题是我不知道如何将我在JS中创建的div放在页面中间，因为它总是出现在页脚之后。我已经尝试在html模板中创建一个div，并在JS中将一个子代添加到该div中，但是它不起作用。
提前感谢。
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>问题在于您正在执行：
document.body.appendChild(contactos(obj));
这将在body元素的末尾附加一个新的子代。由于页脚已经在body的末尾，因此新元素将在页脚之后。
您真正要做的是在页脚之前在页面上创建一个唯一的容器，并为其指定ID，例如contacts，并附加到that元素：
<body>
<header>Your header stuff here</header>
<main>
...
<!-- Append to this -->
<section id="contacts"></section>
...
</main>
<footer>This is your footer</footer>
</body>
// outside the loop
const contacts = document.getElementById('contacts');
...
// in your loop
contacts.appendChild(contactos(obj));