「JavaScript」createElementでテキストボックスを追加、削除

2014年6月3日2021年10月26日

書式
1.const 変数名 = document.createElement(“input");
inputで指定された HTML 要素を生成し、  input が認識できない場合は HTMLUnknownElement を生成します。

2.element.setAttribute(name,value);
変数名.setAttribute(属性,値)
引数
name は属性の名前を文字列で表現したものです。
value は属性の希望する新しい値です。
指定の要素に新しい属性を追加します。または指定の要素に存在する属性の値を変更します。

使用例

<div id="show"></div>
<!--追加ボタンを押下すると、 関数addInputを呼び出す -->
<p><input type="button" value="追加" onclick="addInput()" /></p>
<!--削除ボタンを押下すると、 関数delInputを呼び出す -->
<p><input type="button" value="削除" onclick="delInput()" /></p>

<script>
　/*テキストボックスを作成*/
  function addInput() {
    const cftdiv = document.getElementById("show");
    // 要素の追加
    if (!cftdiv.hasChildNodes()) {
       /*inputで一致するhtml要素を生成*/ 
      const ipt = document.createElement("input");
      // typeを指定
      ipt.setAttribute("type", "text");
      // maxlengthを指定
      ipt.setAttribute("maxlength", "30");
      // sizeを指定
      ipt.setAttribute("size", "30");
      // placeholderを指定
      ipt.setAttribute("placeholder","ユーザー名を入力してください");
      // valueを設定
      ipt.setAttribute("value", "");
      //　name を指定
      ipt.setAttribute("name", "username");
      /*親ノードの子ノードリストの末尾にノードを追加*/
      cftdiv.appendChild(ipt);
    }
  }
  /*テキストボックスを削除*/
  function delInput() {
    const cftdiv = document.getElementById("show");
    if (cftdiv.hasChildNodes()) {
      cftdiv.removeChild(cftdiv.firstChild);
    }
  }
</script>

実行結果
「追加」ボタンを押下するとテキストボックスを作成
「削除」ボタンを押下するとテキストボックスを削除