創(chuàng)建元素節(jié)點(diǎn)
document.createElement( '節(jié)點(diǎn)名' );
var oA = document.createElement( 'a' ); //這里創(chuàng)建一個元素節(jié)點(diǎn)存放在內(nèi)存中鳍刷，還沒放進(jìn)DOM樹
增：
父級.appendChild( 新子節(jié)點(diǎn) ) 父級的最后一個添加一個節(jié)點(diǎn)
var oA = document.createElement( 'a' );
oBox.appendChild( oA );
向父級的最后一個添加一個節(jié)點(diǎn)
image.png
添加內(nèi)容
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0];
var oA = document.createElement('a');
oA.innerHTML ='我是a標(biāo)簽';//往oA里添加內(nèi)容
oA.;
注意：在寫入DOM樹之前把標(biāo)簽屬性內(nèi)容先設(shè)置好忽你，再寫入蔗牡，這樣HTML只繪制一次
oBox.appendChild(oA);
console.log( oA );
</script>
父級.insertBefore（ 新節(jié)點(diǎn)宗侦，當(dāng)前某一個子節(jié)點(diǎn)）
往第二個參數(shù)的子節(jié)點(diǎn)前愚臀，添加新節(jié)點(diǎn)
<script>
var oBox = document.getElementsByClassName( 'box' )[0];
var oA = document.createElement( 'a' );
oBox.insertBefore( oA , oBox.chilren[1] );
</script>
image.png
如果父級沒有子元素的時候
<div class="box"></div>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0];
var oA = document.createElement('a');
oA.innerHTML ='我是a標(biāo)簽';//往oA里添加內(nèi)容
oA.;
oBox.insertBefore( oA , oBox.children[1] );
</script>
也可以正常添加，不用在乎子節(jié)點(diǎn)有沒有存在這樣寫都可以在第一個添加
特殊圖片添加
var oImg = new Image();
oImg.src = '1.jpg';//添加路徑
oDiv.appendChild( oImg );
children動態(tài)獲取
<body>
<div class="box"></div>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0];
var boxChild = oBox.children; //獲取oBox下的子元素矾利，存放在boxChild
oA.innerHTML ='我是a標(biāo)簽';//往oA里添加內(nèi)容
oA.;
oBox.insertBefore( oA , boxChild[0] );//往boxChild的第一個前寫入oA
console.log( boxChild[0]); //打印出第一個
</script>
</body>
image.png
說明children是動態(tài)屬性姑裂；
createTextNode創(chuàng)建文本節(jié)點(diǎn)
var oDiv = document.getElementsByTagName( 'div' )[0];
var oTxt = document.createTextNode( '我是文本節(jié)點(diǎn)' );
oDiv.appendChild( oTxt );
image.png
createDocumentFragment()創(chuàng)建的是文檔碎片、整合多個碎片中介
<body>
<div></div>
<script>
var oDiv = document.getElmentsBytagName( 'div' )[0],
oA = document.createElement( 'a' ),
oP = document.createElement( 'p' ),
oTxt = document.createTextNode( '這是文本節(jié)點(diǎn)' ),
obj = document.createDocumentFragment();//創(chuàng)建文檔碎片
oA.innerHTML = '我是a標(biāo)簽';
oP.innerHTML = '我是p標(biāo)簽';
oDiv.appendChild( oA );
oDiv.appendChild( oP );
oDiv.appendChild( oTxt );
用這種方法頁面會重繪三次
obj.appendChild( oA );
obj.appendChild( oP );
obj.appendChild( oTxt );
創(chuàng)建文檔碎片 把上面要寫入的放到obj里
oDiv.appendChild( obj );
統(tǒng)一放到oDiv里梦皮，頁面只繪制一次
</script>
</body>
父級.removeChild( 子節(jié)點(diǎn) ) 刪除子節(jié)點(diǎn)
<body>
<div class="wrap1">
<div class="wrap">
<div class="box">
<p>你好的</p>
<a href="">我是A標(biāo)簽</a>
</div>
</div>
</div>
<script type="text/javascript">
var oBox = document.getElementsByClassName( 'box' )[0];
console.log( oBox );
oBox.removeChild( oBox.children[1]);//刪掉a標(biāo)簽
</script>
</body>
注意：只能通過父級才能殺掉子節(jié)點(diǎn)炭分；
如果要自己刪自己只有找到父級，再來刪掉
<body>
<div class="wrap1">
<div class="wrap">
<div class="box">
<p>你好的</p>
<a href="">我是A標(biāo)簽</a>
</div>
</div>
</div>
<script type="text/javascript">
var oBox = document.getElementsByClassName( 'box' )[0];
var x = oBox.parentNode.removeChild( oBox );
//oBox.parentNode先找到父級再來刪掉removeChild( oBox )
console.log( oBox ) //打印出上面獲取的
</script>
</body>
oBox.parentNode.removeChild( oBox );
oBox.parentNode先找到父級再來刪掉removeChild( oBox )
console.log( oBox ) //打印出上面獲取的
說明：oBox還在剑肯！存放在內(nèi)存里捧毛，沒有被刪掉
replaceChild()替換
父級.replaceChild( 哪個要替換 ， 替換的對象 )
<ul>
<li>123</li>
</ul>
<script type="text/javascript">
var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li');
oLi.innerHTML = '你好明天';
oUl.replaceChild( oLi,oUl.children[0] );
克隆cloneNode()
1让网、cloneNode( true ) 克隆元素下的所有內(nèi)容
2呀忧、cloneNode( false ) 只克隆標(biāo)簽 (默認(rèn))
true只有克隆標(biāo)簽里行內(nèi)樣式，行內(nèi)事件
js里定義事件 屬性都沒辦法克隆
<div>你昌好的是歸了的是進(jìn)
<p>你好</p>
</div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0],
oDiv.erguo = '2214'; //js里自定義屬性克隆不了
var oAll = oDiv.cloneNode( true );
console.log( oAll );
<div>你昌好的是歸了的是進(jìn)
<p>你好</p>
</div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0],
oAll = oDiv.cloneNode( false );
console.log( oAll );
補(bǔ)充
innerHTML與createElement比較
在IE下 innerHTML性能秒殺createElement
其他瀏覽器innerHTML高一點(diǎn)點(diǎn)
如果選擇哪個呢溃睹？
<div class="wrap"></div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0],
oA = document.createElement('a');
oA.innerHTML = '點(diǎn)擊跳轉(zhuǎn)百度';
oA.;
oDiv.appendChild( oA );
</script>
可以用innerHTML來代替
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0];
oDiv.innerHTML = '<a >點(diǎn)擊跳轉(zhuǎn)百度</a>';
</script>
要添加的標(biāo)簽沒有添加事件時候用innerHTML
添加事件的時候
var oDiv = document.getElementsByTagName('div')[0],
oA = document.createElement('a');
oA.innerHTML = '點(diǎn)擊跳轉(zhuǎn)百度';
oA.;
oA.onclick = function (){
alert(1);
}
oDiv.appendChild( oA );
innerHTML寫法
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0];
oDiv.innerHTML = '<a >點(diǎn)擊跳轉(zhuǎn)百度</a>';
var oA = document.getElementsByTagName('a')[0];
oA.onclick = function () {
alert(1);
}
</script>
添加事件的時候用createElement
