javascript DOM获取、创建、插入、 删除节点实例讲解

<div id="box">
    <p>111</p>
    <p>222</p>
    <p>333</p>
</div>
var oBox = document.getElementById('box');
var oP1 = oBox.children[0];
function nSibling( obj ){
        if ( obj.nextElementSibling ) //如果兼容主流浏览器
       {
                nObj = obj.nextElementSibling;
       }else{
                nObj = obj.nextSibling;
       };

      //如果存在div下只有一个元素节点的时候，obj.nextElementSibling 返回undefined，这时候需要判断是否仍有一个元素节点；
      return nObj.nodeType!==1?null:nObj;
};

<div id="box">
    <p id='goudan'>pppp</p>
</div>
var oBox = document.getElementById('box');
var oA = document.createElement('a');
oA.href = 'http://tanzhouedu.com';
oA.innerHTML = '我是添加的a标签';
oA.className = 'dachui';
oA.id = 'aa';
oBox.appendChild( oA ); //createElement只是创建了个节点，还需要通过appendChild 来加到DOM树上

<div id="box">
    <p id='p1'>苹果</p>
    <p id='p2'>香蕉</p>
    <p id='p3'>梨子</p>
</div>
var oBox = document.getElementById('box');
var oP2 = document.getElementById('p2');
oBox.removeChild( oP2 );