如何将新创建元素添加到body标签之后而非内部？

要实现把新元素放在<body>标签的后面（也就是作为<html>标签的子元素，跟<body>同级），核心是操作<body>的父元素（即<html>），把新元素插入到<body>的下一个兄弟节点位置。下面是两种实用的实现方式：

方法一：使用现代浏览器原生after()方法（推荐） #

现代主流浏览器（Chrome 54+、Firefox 49+、Edge 17+等）都支持Element.after()方法，它可以直接在当前元素的后方插入新元素，代码简洁直观：

// 1. 创建需要添加的新元素
const newElement = document.createElement('div');
newElement.textContent = '我是body标签后面的元素';
newElement.style.background = '#f0f0f0';

// 2. 获取页面的body元素
const body = document.body;

// 3. 将新元素插入到body的后面
body.after(newElement);

方法二：兼容旧浏览器的insertBefore写法 #

如果需要兼容IE这类不支持after()方法的旧浏览器，可以利用parentNode.insertBefore()来实现。原理是：找到<body>的父节点（<html>），把新元素插入到<body>的下一个兄弟节点之前——如果<body>是<html>的最后一个子元素，body.nextSibling会返回null，此时insertBefore会自动把元素添加到父节点的末尾，正好是<body>的后方：

// 1. 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '兼容旧浏览器的body后置元素';

// 2. 获取body和它的父节点（html）
const body = document.body;
const htmlRoot = body.parentNode;

// 3. 插入到body的后面
htmlRoot.insertBefore(newElement, body.nextSibling);

验证效果 #

操作完成后，打开浏览器开发者工具（F12）查看DOM结构，就能看到新元素已经作为<html>的子元素，出现在<body>标签的下方，而非嵌套在<body>内部。

内容的提问来源于stack exchange，提问作者O.Chounry