文章目錄
一、創建DOM元素
1.1、createElement(‘標籤名’)；
-
使用 createElement()，可以創建元素。例如:
var li = document.createElement('li'); -
雖然現在創建好了 li，但是它目前還不會顯示在瀏覽器裏邊，爲什麼呢？
-
因爲瀏覽器不知道它需要放在什麼地方(暫時放在內存當中)，因此需要我們給他指明。
1.2、appendChild(); 添加到末尾
-
使用appendChild(),可以爲指定的元素追加節點。格式如下
-
父級.appendChild(‘子節點’)；
HTML<body> <input id="txt1" type="text"> <input id="btn1" type="button" value="創建li"> <ul id="ul1"></ul> </body><script> window.onload=function(){ var btn1=document.getElementById('btn1'); var ul = document.getElementById('ul1'); btn1.onclick=function(){ var li = document.createElement('li'); //父級.appendChild('子節點')； ul.appendChild(li); } } </script>這樣我們就把創建好的 li，追加到了 ID爲 ul1 的這個ul裏邊
![在這裏插入圖片描述]()
1.3、再對創建的li添加一點文字
<script>
window.onload=function(){
var btn1=document.getElementById('btn1');
var ul = document.getElementById('ul1');
var txt=document.getElementById('txt1');
btn1.onclick=function(){
var li = document.createElement('li');
li.innerHTML = txt.value;
ul.appendChild(li);
}
}
</script>
效果:
可以發現我們成功創建li，並且還添加了文字，但是有一個問題，每次創建的li都是在最末尾添加的，這在某些情況下會很不方便，那麼我們來解決這個問題。
二、insertBefore 插入元素
語法: 父級.insertBefore(子節點,在誰之前插入)；
這裏我多做了兩個功能：
第一：每次追加過後都清空當前文本框的內容
第二：每次追加過後都自動獲取文本框的焦點 使用 .focus();
注意：
.before()和 .insertBefore() 實現同樣的功能。主要的區別是語法——內容和目標的位置。 對於before()選擇表達式在函數前面，內容作爲參數，而.insertBefore()剛好相反，內容在方法前面，它將被放在參數裏元素的前面
.after()和 .insertAfter() 實現同樣的功能。主要的不同是語法——特別是（插入）內容和目標的位置。 對於after()選擇表達式在函數的前面，參數是將要插入的內容。對於 .insertAfter(), 剛好相反，內容在方法前面，它將被放在參數裏元素的後面
before、after與insertBefore。insertAfter的除了目標與位置的不同外，後面的不支持多參數處理
<script>
window.onload=function(){
var btn1=document.getElementById('btn1');
var ul = document.getElementById('ul1');
var txt=document.getElementById('txt1');
btn1.onclick=function(){
var li = document.createElement('li');
var getAllLi = document.getElementsByTagName('li');
li.innerHTML = txt.value;
txt.value='';
txt.focus();
if(getAllLi.length>0){
//父級.insertBefore('子節點',要插入的位置)
//注意:如果是在父元素下創建子元素 使用 父元素節點.childNodes[0] 以保證在第一個位置插入
ul.insertBefore(li,getAllLi[0]);
}else{
//父級.appendChild('子節點')
ul.appendChild(li);
}
}
}
</script>
最終效果:
注意:這裏的文本框焦點是自動獲取的
三、removeChild() 刪除DOM元素
語法：父級.removeChild(‘子節點’)；
<body>
<ul id="ul1">
<li>1<a href="#">刪除</a></li>
<li>2<a href="#">刪除</a></li>
<li>3<a href="#">刪除</a></li>
<li>4<a href="#">刪除</a></li>
</ul>
</body>
<script>
window.onload=function(){
var allA = document.getElementsByTagName('a');
var ul = document.getElementById('ul1');
for(var i=0;i<allA.length;i++){
allA[i].onclick=function(){
//刪除ul下 當前對象的父級 也就是li 孫子叫爺爺收拾爸爸，爸爸沒了，自己也就沒了
//父級.removeChild('子節點');
ul.removeChild(this.parentNode);
};
}
}
</script>
效果：
四、文檔碎片
-
創建文檔碎片，主要作用就是 相當於把重複出現的東西放入一個袋子，最後再把袋子放入瀏覽器
語法：var oFrag= document.createDocumentFragment();
<body>
<ul id="ul1"></ul>
</body>
<script>
window.onload=function(){
var ul=document.getElementById('ul1');
//創建文檔碎片
var oFrag= document.createDocumentFragment();
for(var i=0;i<10000;i++){
var li = document.createElement('li');
// ul.appendChild(li);
//先把1萬個li放入袋子，最後再把袋子放入ul
oFrag.appendChild(li);
}
ul.appendChild(oFrag);
}
</script>