「JavaScript」createElementでテキストボックスを追加、削除
書式
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="追加" /></p> <!--削除ボタンを押下すると、 関数delInputを呼び出す --> <p><input type="button" value="削除" /></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>
実行結果
「追加」ボタンを押下するとテキストボックスを作成
「削除」ボタンを押下するとテキストボックスを削除