个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我目前正在尝试从在线 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>最佳答案
问题是你在做:
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 的占位符 div。然而，问题仍然存在，因为您随后执行了 document.body.appendChild(contactos(obj))，这实际上将所有内容都放在了正文的末尾。
我会这样处理问题:
contactos 函数应该只关心返回您的 contactos 元素。我实际上会避免将这两个命名为相同的东西，因为这会让人有些困惑。也许将元素称为 contactosElement。
获取对 json div 的引用。
将 #1 的结果附加到循环中的 json div，而不是执行 document.body.appendChild(contactos(obj))。
关于javascript - 如何在 Javascript 中创建一个 div 并将其定位在 html 模板的中间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59445500/
25
4
0
有人可以给我一个更简单的以下代码的解决方案(它正在展开给定结构 0xFC :: len :: payload :: ... :: 0x0A :: 0x0D 的整数列表): object Payload
我已经在我的网站上安装了 SSL 证书，但 intermediate.crt 无法正常工作。任何 SSL 检查器(例如 GeoTrust Checker)都告诉我，缺少中间 key 。网站上已经使用了
如何让图像从这个框的中间开始？ (中间纵横) 最佳答案 有几种方法可以做到这一点，如果它需要在所有浏览器(IE7+ 和其他浏览器)中工作，你需要做不同的事情来让它在某些情况下工作。 使用绝对位置
如何强制 min-height 和 vertical-align:middle 为 td 元素或其内部元素工作？ 最佳答案 td 元素上的 height 等同于 min-height，因为如果需要，表
我正在尝试自动滚动到订单簿的中间行。 我有 orderBook div，其中放置了带有 orderBook 的表。该表的其中一行有一个 id middleRow。我想做的是滚动该行并将其放置在 ord
我正在尝试在 javascript 中计算绝对定位元素的 transform-origin 属性，以便它们在悬停时填充整个视口(viewport)。 我尝试通过 x 除以窗口宽度和 y 除以窗口高度来
我有休闲字符串 ' this is my string ' 是否可以删除开头和结尾的所有空格，只在单词之间留一个空格。 要选择我使用过的所有空间: SELECT regexp_replace('
我正在设法创建我的第一个复杂的 J2E 解决方案，并且在每个教程中我都发现了某种中间表的用法，如下所示: 表:用户、用户角色、角色虽然逻辑会简单地向用户表添加一个键来引用它在角色表上的角色，但为什么要
我正在寻找以下解决方案。我想定位一个图像元素，例如 在中间。所以高度是视口(viewport)的高度，宽度会自动设置，图像的中间应该在视口(viewport)宽度的中间。 我搜索的一个例子就像下面的网
我正在设计一种布局，它更像是注册用户的个人仪表板。我让它变得简单，使用基本的 2 列网格，一个用于侧边栏，一个用于主要内容。 因为，例如，80% 的网站使用将发生在一个单独的子系统中，在无 chrom
我有三个不同的 div 标签(不在彼此内部)和代码，所以它有一个把单词放在左边、中间或右边，但中心非常偏离中心。这是 HTML 代码: .desc { float: right; color:
我有以下CSS http://jsbin.com/azivip/75/edit我想让黄色的 div 高度填充蓝色和绿色 div 之间的空间。使用高度继承似乎使 div 超出了绿色 div。 有什么想法
我不得不在其父元素的中间放置一些文本。我用下面的代码实现了它: #div1 { position: relative; margin: 0; padding: 0; } #div2 {
发现一个使用合法证书(由thawte 签名)的网站，但所有浏览器都会拒绝它。我不明白为什么。thawte 的支持告诉我一个域有两个证书，然后将这个 https://www.sslshopper[dot
我正在尝试使用 OpenSSL 创建证书链，但出于某种原因，当我在我的计算机上安装我的根 CA 并尝试验证证书链时，它总是告诉我它找不到证书的颁发者.为了让事情发生，我必须安装中间 CA，这是没有意义
我看到 REST 的一大好处是依赖 HTTP 缓存。我不是在争论这个，而是完全认同这个想法。但是，我从来没有看到对中间 HTTP 缓存的更深入的解释。 如果我将 Cache-control heade
查看此图片 Facebook Messenger Android App Buttons ( MESSENGER\ACTIVE ) 我怎样才能做到这一点？ 详细信息:- 带有 2px 红色边框的 di
我的任务是制作漂亮的文本，在文本中间加一条白线，如下图所示。是否可以使用 css 来实现？这是 Fiddle .container{ height:200px; width:400px;
在拉丁文字中，字母有大写和小写形式。在 Python 中，如果你想比较两个字符串而不考虑它们的大小写，你可以使用 'string'.upper() 或 'string'.lower() 将它们转换为相
我正在使用 awk 对文件进行一些文本处理。例如删除尾随空格。 awk '{gsub(/ +$/, "")} {print $0}' filename 这很好用。但是当我将输出重定向到原始文件时。它变
我是一名优秀的程序员,十分优秀！