javascript_javascript スキルで要素を動的に作成および削除する方法

この記事の例では、JavaScript で要素を動的に作成および削除する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

DOM では、簡単かつ迅速に dom 要素を動的に削除したり削除したりすることができます。

例 1:

ボタンを動的に作成する

コードをコピーします コードは次のとおりです。

<スクリプト言語="javascript"> var a,b,ab,ba,c;
function createInputA(){
a = document.createElement("input"); //DOM 要素作成メソッドを使用します
a.type = "button" //要素のタイプを設定します
; a.value = "ボタン A" //要素
の値を設定します。 a.attachEvent("onclick",addInputB) // コントロールにイベントを追加します
document.body.appendChild(a); // フォームにコントロールを追加します
//a = null //オブジェクトを解放します
}

例 2:

コードをコピー コードは次のとおりです:

<頭>

<スクリプトタイプ="text/javascript">
関数 test(){
//createElement() 指定したタグ名で要素を作成します (例: ハイパーリンクを動的に作成します)
var createa=document.createElement("a");
createa.id="a1";
createa.innerText="百度に接続";
createa.href="http://www.jb51.net";
//createa.color="green" ////色を追加します (style 属性を忘れないでください。そうでないと効果がありません)
createa.style.color="green"
//デフォルトの位置 --body を追加し、子ノードを追加します
//document.body.appendChild(createa);
//指定された場所を配置します
document.getElementById("div1").appendChild(createa);
}

関数 test2(){
//指定された場所にあるノードを削除しますremoveChild()
document.getElementById("div1").removeChild(document.getElementById("a1")); // ID 名が繰り返される場合、js は最初の ID のみを取得します
}

複数のフォームを動的に作成します:

コードをコピー コードは次のとおりです:

 <頭>
  <スクリプトタイプ="text/javascript">
   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 = length - 1; i >= 0; i--) {
     if (btns[i].isCopy) {
      document.body.removeChild(btns[i]);
     }
    }
   }
 
 
 
 
 

ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。