DOM操作
更新DOM节点
<body>
<div id="father">
<h1>the name</h1>
<p class="p1">test p</p>
</div>
</body>
<script>
var d1 = document.getElementById('father');
d1.innerText = '123';
d1.innerHTML = '<strong>456</strong>';
d1.style.color = 'red';
</script>
删除DOM节点
<script>
var d1 = document.getElementById('father');
var h1 = document.getElementsByTagName('h1');//返回的是一个数组
d1.removeChild(h1[0]);//删除数组中的第一个
</script>
插入DOM节点
<body>
<p id="one">one</p>
<div id="father">
<h1>the name</h1>
<p class="p1">test p</p>
</div>
</body>
one移到div中
<script>
var d1 = document.getElementById('father');
d1.appendChild(document.getElementById('one'));
</script>
新增一个节点并且插入到div中
<script>
var d1 = document.getElementById('father');
//创建一个<p id="new" style="color: yellow">new element</p>
var newelement = document.createElement('p');//创建<p></p>标签,可以创建各种标签,例如link,scirpt
newelement.id = 'new';//创建一个id
//newelement.setAttribute('id','new');,创建一个id的另一种方式
newelement.innerText = 'new element';
newelement.style.color = 'yellow';
//newelement.setAttribute('style','color: yellow');也可以这样赋值颜色
d1.appendChild(newelement);
</script>
在h1的前面插入p
<script>
var d1 = document.getElementById('father');
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementsByClassName('p1');
//父节点.insertBefore(newNode,targetNode)
d1.insertBefore(p1[0],h1[0]);//在h1的前面插入p1
</script>