关于js如如何创建和插入节点可以参考，有详细的注解，可以直接复制看效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.uu{
color:red;
}
</style>
</head>
<body>
<div id="cc">hello</div>
<div id="gg">world</div>
</body>
<script>
//创建并插入
// createElement先创建元素（要创建啥里面就写啥标签）
var aa=document.createElement("div");
// 元素里面的内容
aa.innerHTML="zhangli";
// 元素的类名
aa.className="uu";
// 获取要添加到哪个元素哪里
var ss=document.getElementById("cc");
//添加到ss的末尾
ss.appendChild(aa)
//在任意位置插入节点：1：先找到要在哪个元素之前插入 2：找到这个元素的父元素 3：插入（insertBefore）
var aa=document.createElement("div");
var ss=document.getElementById("cc");
var dd=document.getElementById("gg")
dd.insertBefore(aa,ss) //目标父亲.insertBefore(新的，目标)
</script>
</html>
声明：本人大二软工一枚，若有错误还请大家指正，一定不胜感激，也欢迎大家评论交流，我们一起进步鸭@