JavaScript基础 DOM对象3 增、删

创建元素节点
document.createElement( '节点名' );

var oA = document.createElement( 'a' ); //这里创建一个元素节点存放在内存中，还没放进DOM树

增：
父级.appendChild( 新子节点 ) 父级的最后一个添加一个节点

var oA = document.createElement( 'a' );
oBox.appendChild( oA );

向父级的最后一个添加一个节点

image.png

添加内容

父级.insertBefore（ 新节点，当前某一个子节点）
往第二个参数的子节点前，添加新节点

image.png

如果父级没有子元素的时候

也可以正常添加，不用在乎子节点有没有存在这样写都可以在第一个添加

特殊图片添加

var oImg = new Image();
oImg.src = '1.jpg';//添加路径
oDiv.appendChild( oImg );

children动态获取

image.png

说明children是动态属性；

createTextNode创建文本节点

var oDiv = document.getElementsByTagName( 'div' )[0];
var oTxt = document.createTextNode( '我是文本节点' );
oDiv.appendChild( oTxt );

image.png

createDocumentFragment()创建的是文档碎片、整合多个碎片中介

父级.removeChild( 子节点 ) 删除子节点

    

        

            

                
你好的
                我是A标签
            
        
    
    

注意：只能通过父级才能杀掉子节点；
如果要自己删自己只有找到父级，再来删掉

    

        

            

                
你好的
                我是A标签
            
        
    
    

oBox.parentNode.removeChild( oBox );
oBox.parentNode先找到父级再来删掉removeChild( oBox )
console.log( oBox ) //打印出上面获取的
说明：oBox还在！存放在内存里，没有被删掉

replaceChild()替换
父级.replaceChild( 哪个要替换 ， 替换的对象 )

    

        
123
    
    
可以用innerHTML来代替

    

要添加的标签没有添加事件时候用innerHTML

添加事件的时候

var oDiv = document.getElementsByTagName('div')[0],
           oA = document.createElement('a');
           oA.innerHTML = '点击跳转百度';
           oA.href = 'http://www.baidu.com';
           oA.onclick = function (){
               alert(1);
           }
           oDiv.appendChild( oA );

innerHTML写法

添加事件的时候用createElement