javascript動態建立及刪除元素的方法_javascript技巧

本文實例講述了javascript動態創建及刪除元素的方法。分享給大家供大家參考。具體分析如下：

在DOM中我們可以方便快速的動態刪除與刪除dom元素，這裡我們就來給各位朋友簡單的介紹一下。

例1：

動態建立一個按鈕

複製程式碼 程式碼如下:

例2：

複製程式碼 程式碼如下:

動態建立多個表單：

複製程式碼 程式碼如下:

 
 
   window.onload = function() {
    var aBtn = document.createElement("input");
    var bBtn = document.createElement("input");
    var cBtn = document.createElement("input");
   
    aBtn.type = "按鈕";
    aBtn.value = "按鈕A";
    aBtn.onclick = copyBtn;
   
    bBtn.type = "按鈕";
    bBtn.value = "按鈕B";
    bBtn.onclick = copyBtn;
   
    cBtn.type = "按鈕";
    cBtn.value = "按鈕C";
    cBtn.onclick =clearCopyBtn;
   
    document.body.appendChild(aBtn);
    document.body.appendChild(bBtn);
    document.body.appendChild(cBtn);
   };
  
   函數 copyBtn() {
    var btn = document.createElement("input");
    btn.type = "按鈕";
    btn.value = this.value;
    btn.isCopy = true;
    btn.onclick = copyBtn;
    document.body.appendChild(btn);
   }
  
   函數clearCopyBtn() {
    var btns = document.getElementsByTagName("input");
    var length = btns.length;
    for (var i = 長度 - 1; i >= 0; i--) {
     if (btns[i].isCopy) {
      document.body.removeChild(btns[i]);
     }
    }
   }
  腳本>
 頭>
 
 
 身體>

希望本文對大家介紹的javascript程式設計有幫助。