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

问题描述 投票:1回答:1

我目前正在尝试从在线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>
javascript html json position
1个回答
2
投票

问题在于您正在执行:

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));
热门问题
推荐问题
最新问题