如何在 Javascript 中创建 div 并将其放置在 html 模板的中间

Question

我目前正在尝试从在线 json 元素生成器获取一些数据，该生成器会生成随机用户数据。我想处理这些数据并将其放在我的 "contacts" 页面的中间。

一切顺利，我面临的唯一问题是我不知道如何将我在 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));
        }
    });
}
let jsonDiv = document.getElementById("json");
function contactos(info){
    let contactosElement = document.createElement("div");
    contactosElement.classList.add("contactos");

    let contactoElement = document.createElement("div");
    contactoElement.classList.add("contacto");

    let tituloElement = document.createElement("h3");
    tituloElement.innerText = "Geral";

    let nomeElement = document.createElement("p");
    nomeElement.innerText = info.name.first;

    let mailElement = document.createElement("p");
    mailElement.innerText = info.email;


    jsonDiv.appendChild(contactosElement);

    contactosElement.appendChild(contactoElement);
    contactoElement.appendChild(tituloElement);
    contactoElement.appendChild(nomeElement);
    contactoElement.appendChild(mailElement);

    return contactosElement;
}

<!DOCTYPE html>
<html lang="en">
<head>

    <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/json.js"></script>
<script src="JS/menu.js"></script>
</body>
</html>

Answer 1

问题是你在做：

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));

但您似乎已经有了这样一个 ID 为 json 的占位符 div。但是，问题仍然存在，因为您随后执行了 document.body.appendChild(contactos(obj))，这实际上将所有内容都放在了正文的末尾。

我会这样处理问题：

contactos 函数应该只担心返回 contactos 元素。我实际上会避免将这两个命名为相同的东西，因为这会让人有些困惑。也许调用元素 contactosElement.
获取对jsondiv的引用。
将 #1 的结果附加到循环中的 json div，而不是 document.body.appendChild(contactos(obj)).

如何在 Javascript 中创建 div 并将其放置在 html 模板的中间

How to create a div in Javascript and position it in the middle of the html template

html

javascript

json

position