js小功能之-新增元素-清楚元素

js的功能是非常強大的，今天我們就錄用js來做一個好玩的功能，如下圖

（1）可以新增元素

（2）清楚所有的元素，

（3）點選按鈕的取消可以刪除元素

下面就介紹一下程式碼部分。首先是html部分

html部分比較簡單主要是一個白色的div,用來放新增的資料

還有一個全部清除的按鈕

第三部分就是用button放的三個資料，以及三個新增按鈕

下面介紹一下css部分

css主要設定了白色div的，以及全部清楚按鈕的樣式，以及四個新增按鈕的樣式，位置css的佈局還是比較簡單

下面介紹一下js部分的程式碼，讓他實現這些功能

《1》新增元素

首先理一下思路，1-首先獲取元素，

2-並給元素加點選事件，得到要新增的元素

3建立一個元素

4，給建立的元素加入內容

5在大的空白Div中插入元素

這樣元素就成功插入了。

然後是點選刪除A連結刪除元素，首先也是獲取元素

然後加點選事件

《2》刪除元素   格式是 父元素.removeChild（子元素）

 oDiv.removeChild(oButton);

這樣元素就刪除成功了。

還有一個功能全部清楚

是用了一個while迴圈判斷它有沒有孩子節點，如果發現有孩子節點，就刪除他的第一個子節點-

直到沒有子節點，才完成迴圈，這樣就全部清楚了所有的元素。

完整得js程式碼如下

<script>

var oBtn=document.getElementById('btn1');

var oBtn2=document.getElementById('btn2');

var oBtn3=document.getElementById('btn3');

var  oDiv=document.getElementById('box');

var  oClear=document.querySelector('input');

oBtn.onclick=function () {

var oP=document.getElementById('btn4');

var str=oP.value;

var oButton=document.createElement('button');

oButton.innerHTML=str+'<a href="javascript:;">取消</a>';

oDiv.appendChild(oButton);

var oA=document.querySelector('a');

oA.onclick=function () {

oDiv.removeChild(oButton);

}

}

oBtn2.onclick=function () {

var  oDiv1=document.getElementById('box');

var oP1 =document.getElementById('btn5');

var str1 =oP1.value;

var oButton =document.createElement('button');//建立元素

                    oButton.innerHTML =str1 +'<a href="javascript:;">取消</a>';

oDiv1.appendChild(oButton);

var oA1 =document.querySelector('a');

oA1.onclick =function () {

oDiv1.removeChild(oButton);

}

}

oBtn3.onclick=function () {

var oDiv =document.getElementById('box');

var oP2 =document.getElementById('btn6');

var str2 =oP2.value;

var oButton=document.createElement('button');//建立元素

        oButton.innerHTML =str2 +'<a href="javascript:;">取消</a>';

oDiv.appendChild(oButton);

var oA2 =document.querySelector('a');

oA2.onclick =function () {

oDiv.removeChild(oButton);

}

}

oClear.onclick=function () {

var  oDiv=document.getElementById('box');

while(oDiv.hasChildNodes()){

oDiv.removeChild(oDiv.firstChild)

}

}

</script>