如何仅使用 JavaScript 获取下一个元素？答案

【问题标题】：How to get next element using JavaScript-only?如何仅使用 JavaScript 获取下一个元素？
【发布时间】：2023-03-13 05:48:02
【问题描述】：

假设我们有这个标记：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>project.js</title>
<script src="project.js"></script>
<script>

</script>
</head>

<body>
<h1>some project &mdash; javascript & html tests</h1>
<hr />

    <p>
        testing 123
    </p>
</body>
</html>

我知道有.prependChild()、.appendChild()、.innerHTML等属性和方法，但我要找的是如何在</body>标签闭包之后添加（追加）内容？

我需要这个，不使用 jQuery — 有可能吗？

【问题讨论】：

我认为大多数浏览器不会让您通过 DOM 函数创建无效的 DOM。（html 只能包含 1 个head 和 1 个body 元素和注释节点。没有别的。）
所以意思..如果我想添加一些东西after body我应该然后附加父：html标签？
@ZlatanO。你要添加什么？！
no.. 这意味着如果您尝试在 body 标记后添加除 cmets 以外的任何内容，浏览器将忽略它或将其附加到 body。
@MatíasFidemraizer - 抱歉 matias，没有回答您的问题。我现在看到我们可以添加脚本：appended or prepended to **head** 或 appended or prepended to **body** .. 我正在制作脚本加载器跨度>

标签： javascript prepend

【解决方案1】：

如果你使用'id'。你可以使用这些属性：

document.getElementById('id').nextSibling; 
document.getElementById('id').previousSibling;

【讨论】：

值得一提的是，如果元素之间有空格，nextSibling 将返回undefined。在此处查看此示例：w3schools.com/code/tryit.asp?filename=FBONDLQCJA0W

【解决方案2】：

它在某些浏览器中不起作用，因为body 之后的内容不是“合法的”。无论如何，这将是：

document.body.parentNode.appendChild(document.createTextNode('text after body'));
document.body.parentNode.appendChild(document.createComment('comment after body'));

http://jsfiddle.net/yVKk6/ 并检查结果框架。

【讨论】：

由于一些无法解释的原因，我认为我们可以在 </body> 语句之后添加脚本，但现在我意识到它们要么附加/附加到 body 或 head！