JS_javascript スキルで要素を動的に作成する 2 つの方法

この記事では、参考のために js で要素を作成する 2 つの方法を紹介します。具体的な内容は次のとおりです。

1) 文字列の形式で作成する必要がある要素を結合し、親要素を見つけて、親要素の innerHTML に値を直接割り当てます。

2) Document オブジェクトと Element オブジェクトに付属の関数を使用して要素を動的に作成します (要素の作成 => 親要素の検索 => 指定された位置に要素の挿入)

1. 文字列連結形式

理解を深めるために、アプリケーションのシナリオを設定します。

以下に示すように、一連の数値をランダムに生成し、このデータ セットを棒グラフにレンダリングして div[id="container"] に配置します

 <div id="container">
 </div>
 <script>
  window.onload = function () {
   var str='';
   for(var i=0; i<30 ;i++){
    var r = parseInt(Math.random()*100); //随机生成一个数字
    str += '<div>'+r+'</div>'; //拼接str
   }
   document.getElementById('container').innerHTML=str;
  }
 </script>

2. Document オブジェクトと Element オブジェクトに付属するいくつかの関数を使用します

以下に示すように、アプリケーション シナリオも設定します

入力内の情報を取得し、右側のボタンに従って、下の赤い四角形の左側または右側に挿入します。

解決策は 3 つのステップに分かれています:

1. 要素を作成します: Document.createElement()
2. 親要素を検索します。ID、名前、タグ名、クラスを使用し、指定された CSS セレクター
と一致します。 3. 指定された位置に要素を挿入します: element.appendChild()、element.insertBefore()

実装コード:

<div id="div-input">
 <input type="text" id="txt_input" value="4"/>
 <input type="button" id="leftInsert" value="左侧入" />
 <input type="button" id="rightInsert" value="右侧入" />
</div>
<div id="container">
 <span>1</span>
 <span>2</span>
 <span>3</span>
</div>
 <script>
  window.onload = function () {
   var inputValue= document.getElementById('txt_input').value;
   document.getElementById('leftInsert').onclick=function(){
    //左侧入
    var span = document.createElement('span'); //1、创建元素
    span.innerHTML=inputValue;
    var container = document.getElementById('container'); //2、找到父级元素
    container.insertBefore(span,container.childNodes[0]);//插入到最左边
   }
   document.getElementById('rightInsert').onclick=function(){
    //右侧入
    var span = document.createElement('span'); //1、创建元素
    span.innerHTML=inputValue;
    var container = document.getElementById('container'); //2、找到父级元素
    container.appendChild(span); //3、在末尾中添加元素
   }
  }
 </script>

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。