我正在尝试用Javascript加载两个元素。我的HTML看起来像这样:
<body>
<div class="something">
<nav class="navbar"></nav>
<footer></footer>
</div>
</body>
我想实现的是这样的HTML:
<body>
<nav class="navbar"></nav>
<div class="something"></div>
<footer></footer>
</body>
基本上，nav元素位于开始正文标签下方，footer元素位于末尾。
我确实试过这样做:
var a = document.getElementsByClassName("navbar");
document.body.appendChild(a);
见注释:
// Get the `.something` element and its parent
const something = document.querySelector(".something");
const parent = something.parentElement;
// Get the `navbar` inside it and move it in front of it
const navbar = something.querySelector(".navbar");
parent.insertBefore(navbar, something);
// Get the `footer` inside it and insert it after it
const footer = something.querySelector("footer");
parent.insertBefore(footer, something.nextElementSibling);<div class="something">
<nav class="navbar"></nav>
<footer></footer>
</div>运行后，如果您右键单击输出窗格并查看HTML，您将看到它们按照请求的顺序排列(忽略代码片段放在那里的script)。
如果您在页面上重复此操作，那么您所要更改的就是如何使用循环使something元素工作:
for (const something of document.querySelectorAll(".something")) {
// ...rest of the code goes here unchanged...
}
注意，这要求querySelectorAll中的NodeList是可迭代的，这在现代环境中是可行的。你可以在稍微老一点的环境中填充它，这些环境支持迭代，但还没有像我在这个答案中描述的那样使NodeList可迭代。对于不支持可迭代性的环境，该链接还显示了如何在NodeList没有可迭代性的情况下填充forEach，您可以这样使用:
document.querySelectorAll(".something").forEach(something => {
// ...rest of the code goes here unchanged...
});
您可以使用inserBefore来做到这一点。我的答案就像T.J.克劳德的答案，但如果你有这些元素的多个实例，通过循环所有找到的实例，这将工作。
document.querySelectorAll('.navbar').forEach((el) => {
el.parentNode.parentNode.insertBefore(el, el.parentNode);
});
document.querySelectorAll('footer').forEach((el) => {
el.parentNode.parentNode.insertBefore(el, el.parentNode.nextElementSibling);
});<body>
<div class="something">
something
<nav class="navbar">navbar</nav>
<footer>footer</footer>
</div>
<div class="something">
something2
<nav class="navbar">navbar2</nav>
<footer>footer2</footer>
</div>
</body>