创建和插入DOM节点

 

>插入节点

我们获取了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这个干了！会产生覆盖

追加

```html
<p id="js">
JavaScript
</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>

<script>
var js=document.getElementById('js');
var list=document.getElementById('list');
list.appendChild(js);//追加到后面
</script>
```

>创建一个新的标签，实现插入

```html
<script>
var js=document.getElementById('js');//已存在的节点
var list=document.getElementById('list');
//通过js创建一个新的节点
var newP=document.createElement('p');//创建一个p标签
newP.id='newP';
newP.innerText='hello';
//创建一个标签节点
var myScript=document.createElement('script');
myScript.setAttribute('type','text/javascript');
//可以创建一个style标签
var myStyle=document.createElement('style');//创建了一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{background-color: red;}';//设置标签内容

document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>
```

>insert

```javascript
var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
//要包含的节点，insertBefore（newNode，targetNode）
list.insertBefore(js,ee);
```