插入节点
我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是我们这个DOM节点已经存在了元素了，我们就不能这么干了！ 会产生覆盖。
追加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="script">JavaScript</p>
<div id="list">
<p id="SE">JavaSE</p>
<p id="EE">JavaEE</p>
<p id="ME">JavaME</p>
</div>
<script>
var sc=document.getElementById('script')
var list=document.getElementById('list')
list.append(sc)
</script>
</body>
</html>
创建一个新标签，实现插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="script">JavaScript</p>
<div id="list">
<p id="SE">JavaSE</p>
<p id="EE">JavaEE</p>
<p id="ME">JavaME</p>
</div>
<script>
var sc=document.getElementById('script')
var list=document.getElementById('list')
//list.append(sc) 附加
var newp=document.createElement('p')
newp.id='newp'
newp.innerText='hello'
list.append(newp)
//创建一个标签节点 带参数的
var myScript =document.createElement('script');
myScript.setAttribute('type','text/script') //括号里面的值 key value
list.appendChild(myScript)
//可以创建一个Style标签
var style=document.createElement('style'); //首先先创建一个空的style标签
style.setAttribute('type','text/css');
style.innerHTML='body{background-color:chartreuse}'; //设置标签内容
document.getElementsByTagName('head')[0].appendChild(style)
</script>
</body>
</html>