SOURCE

//更新第一个p元素；
var ss=document.getElementsByTagName('p');
ss[0].innerHTML='HELLO';

//创建并插入新的<li>tag
var add=document.createElement('li');
add.innerText='createElement()创建一个新的元素';
add.setAttribute('style','color:green;');
add.setAttribute('id','ref');
document.getElementById('adds').appendChild(add);

//insertBefore()方法插入元素；
var insert=document.createElement('li');
insert.innerHTML='用insertBefore(newelmts,refelmts)方法插入新的元素';
insert.setAttribute('style','color:blue;');
document.getElementById('adds').insertBefore(insert,ref);

/*通过循环
for(i=0;i<adds.children.length;i++){
c=adds.children[i];
}拿到第i个子节点
*/

//删除操作,先拿到父节点；
var shanchu=document.getElementById('toberemoved');
shanchu.parentElement.removeChild(shanchu);

<h3>demo</h3>
<div>
   <p>DOM对象模型</p>
<p id=para1>运用JS来操纵DOM元素！</p>
  <ul><span>获取DOM节点：</span>
    <li>getElementById('id');如果没有指定 ID 的元素返回 null,存在多个则返回undefined</li>
    <li>getElementsByClassName('class');返回文档中所有指定类名的元素集合</li>
    <li>getElementsByTagName('tag');返回的是数组</li>
  </ul>
  <ul><span>更新操作：</span>
    <li>修改innerHTML属性和<span>结构</span></li>
    <li>修改innerText、innerContent属性</li>
    <li>修改CSS属性：<span>eg:</span>&nbsp;ss.style.fontSize='20px';<span>(注意属性值改为驼峰命名）</span></li>
    <li id='toberemoved'>to be removed.</li>
  </ul>
  <ul id='adds'><span>添加操作：</span>
    <li>appendChild()方法</li>
  </ul>
  <ul><span>删除操作：</span>
    <li>调用父节点的removeChild();方法</li>
    <li>注意parentnode.children的children属性是一个数组，会随着删除节点而改变；</li>
  </ul>
  <form>
    项目名称:<input type='text' name='xm'><br><br>
     &nbsp;&nbsp;&nbsp;E-mail:<input type='mail' name='mail'><br>
      </form>
</div>

form{
  border:1px solid red;
  padding:50px 30px;
  margin:auto;
  width:60%;
  color:orange;
  background-color:gray;
}
ul{
  font-size:12px;
  color:orange;
}
ul span{
  color:red;
}