JS动态创建div时insertBefore报错：参考节点非当前节点子节点

• 核心问题出在多余的my_div.insertBefore(newDiv, workspace);这行代码，你本身的需求是在容器已有元素末尾追加新div，前面的my_div.appendChild(newDiv)已经完全实现了这个效果，这行insertBefore逻辑完全冗余。
• insertBefore的调用规则是父节点.insertBefore(待插入新节点, 参考位置的子节点)，要求第二个参数必须是当前父节点的直接子元素。你这里传入的workspace既没有提前声明变量，浏览器自动通过id映射拿到的是id为workspace的容器本身（也就是my_div自己），节点不可能是自身的子元素，自然会抛出对应DOM异常。
• 额外注意：HTML规范中不存在<h7>标签，标题标签范围是<h1>到<h6>，写<h7>会被浏览器当作普通行内元素解析，不会自带标题的默认样式和语义。

直接删除多余的insertBefore调用行即可，同时建议把不合法的<h7>换成标准标签，修正后的完整代码如下：

<body>
...
<div id="workspace" >
<script type="text/javascript">
var my_div = document.getElementById("workspace");
var newDiv = null;
function addElement() {
  newDiv = document.createElement("div");
  // 替换为合法的标题/文本标签，这里用h3举例，可根据需求换成p、h4等
  newDiv.innerHTML = "<h3>Hi there and greetings!</h3>";
  newDiv.style.width = "200px";
  newDiv.style.height = "50px";
  newDiv.style.background = "red";
  // appendChild天然会把新节点插到父容器所有子元素的末尾，符合你的需求
  my_div.appendChild(newDiv);
}
</script>

<a href="#" onclick="addElement()">ADD new greeting</a>
</div>
...
</body>

补充说明：如果后续你需要实现「把新元素插到某个已有元素前面」的需求，再使用insertBefore，注意第二个参数必须是父容器下真实存在的子节点，比如要把新元素插到容器最开头，就写my_div.insertBefore(newDiv, my_div.firstChild)。

内容的提问来源于stack exchange，提问作者Wincij