时间戳

首页 > 解决方案 > 如何在Javascript中创建一个div并将其放置在html模板的中间

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

问题描述

我目前正在尝试从在线 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));
        }
    });
}
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>

标签： javascripthtmljsonposition

解决方案

问题是你正在做：

document.body.appendChild(contactos(obj));

这实际上会在元素的末尾附加一个新的子body元素。由于您的页脚已经位于 末尾body，因此您的新元素将位于页脚之后。

你真正应该做的是在页脚之前在你的页面上创建一个唯一的容器，并给它一个 ID，比如说contacts，并附加到该元素：

<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. 但是，问题仍然存在，因为您这样做document.body.appendChild(contactos(obj))了，这实际上将所有内容都放在了正文的末尾。

我会这样处理问题：

  1. 该contactos函数应该只担心返回您的contactos元素。我实际上会避免将这两个命名为相同的东西，因为这有点令人困惑。也许调用元素contactosElement。

  2. 获取对jsondiv 的引用。

  3. 将 #1 的结果附加到循环中的jsondiv 中，而不是执行document.body.appendChild(contactos(obj)).

推荐阅读