插入节点
我们获得的某个DOM节点,假设这个DOM节点是空的,通过innerHTML就可以增加一个元素了,但是这个DOM节点以及存在元素了,就不能这么干了,会产生覆盖
追加
<p id = "js">JavaScript</p>
<div id = "list">
<p id = "ee">JavaEE</p>
<p id = "se">JavaSE</p>
<p id = "me">JavaME</p>
</div>
<script>
let js = document.getElementById('js'); //已存在的节点
let list= document.getElementById('list');
</script>
list.appendChild(js) // 回车显示
JavaScript
新加
<body>
<p id = "js">JavaScript</p>
<div id = "list">
<p id = "ee">JavaEE</p>
<p id = "se">JavaSE</p>
<p id = "me">JavaME</p>
</div>
<script>
let js = document.getElementById('js');
let list= document.getElementById('list');
//创建一个新的节点
let newp = document.createElement('p'); //创建一个新标签
newp.id = "newp";
newp.innerText='hello word';
list.appendChild(newp);
//创建一个标签属性 通过这个属性可以设置任何值
let my = document.createElement('script');
my.setAttribute('type','text/javascript');
let mystyle = document.createElement('style');
mystyle.setAttribute('type','text/css');
mystyle.innerHTML='body{background-color:red;}';
document.getElementsByTagName('head'[0].appendChild(mystyle);
</script>
insert
<p id = "js">JavaScript</p>
<div id = "list">
<p id = "ee">JavaEE</p>
<p id = "se">JavaSE</p>
<p id = "me">JavaME</p>
</div>
<script>
let se = document.getElementById('se');
let js = document.getElementById('js');
let list = document.getElementById('list');
//要包含的节点 insertBefore(newNode,targetNode)
list.insertBefore(js,se);
</script>