今回はjavascriptでList内にbuttonなどのinputタグを追加する方法についてまとめたいと思います。
htmlで記載されたタグを操作する際には、
documentオブジェクトを使用するかと思います。
自分もよく表示内容を切り替えたり属性(Attribute)を切り替えたりするのに使用するのですが、
ある日作業をしている最中に、
documentオブジェクトを使用して別タグを追加するにはどうすればいいのだろう？？
と躓いてしまいました。
今回は今後のために備忘録として残しておきたいと思います。
■(おさらい)documentオブジェクトの基本操作
先ほど冒頭で述べた通り、documentオブジェクトを利用していきます。
ここで一旦documentオブジェクトの使用方法について簡単にまとめておきます。
コードの内容は、htmlで
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="script.js"></script> <title>table Test</title> </head> <body> <table> <tbody id="InsertTable"></tbody> </table> <input type="button" value="Add" onclick="AddColumn()"> </body> </html>
とした時のtableの追加をdocumentオブジェクトで実施していきます。
コードはこちら。
function AddColumn(){ var table = document.getElementById("InsertTable"); var tr = document.createElement("tr"); var cell_1 = document.createElement("td"); var cellText_1 = document.createTextNode("hoge"); cell_1.appendChild(cellText_1); tr.appendChild(cell_1); var cell_2 = document.createElement("td"); var cellText_2 = document.createTextNode("huga"); cell_2.appendChild(cellText_2); tr.appendChild(cell_2); var cell_3 = document.createElement("td"); var cellText_3 = document.createTextNode("123"); cell_3.appendChild(cellText_3); tr.appendChild(cell_3); table.appendChild(tr); }
細かい解説はおいておきますが、
var table = document.getElementById("InsertTable");
にてtableのIDであるInsertTableを指定して要素の取得を行います。
そして、
var tr = document.createElement("tr"); var cell_1 = document.createElement("td"); var cellText_1 = document.createTextNode("hoge"); cell_1.appendChild(cellText_1); tr.appendChild(cell_1);
にて、子オブジェクトとしてtrタグ→tdタグを追加し、
tdタグにcreateTextNodeでtable内に書き込む文字列を指定。
これらを3要素分追加を行い、最後に
table.appendChild(tr);
で先ほど指定したtable要素に子オブジェクトを追加して完了です。
■tableタグ内にinputタグを追加する
では、本題のinputタグを追加する方法についてまとめます。
先ほどのコードの3列目にinputタグを追加してみます。
全体のコードはこちら。
function AddColumn(){ var table = document.getElementById("InsertTable"); var tr = document.createElement("tr"); var cell_1 = document.createElement("td"); var cellText_1 = document.createTextNode("hoge"); cell_1.appendChild(cellText_1); tr.appendChild(cell_1); var cell_2 = document.createElement("td"); var cellText_2 = document.createTextNode("huga"); cell_2.appendChild(cellText_2); tr.appendChild(cell_2); var cell_3 = document.createElement("td"); var input_text = document.createElement("input"); input_text.setAttribute("type", "button"); input_text.setAttribute("value", "ボタン"); input_text.setAttribute("onclick", "alert('test')"); input_text.setAttribute("id", "idNum"); cell_3.appendChild(input_text); tr.appendChild(cell_3); table.appendChild(tr); }
こちらのコードで置き換えた部分は、
var cell_3 = document.createElement("td"); var input_text = document.createElement("input"); input_text.setAttribute("type", "button"); input_text.setAttribute("value", "ボタン"); input_text.setAttribute("onclick", "alert('test')"); input_text.setAttribute("id", "idNum"); cell_3.appendChild(input_text); tr.appendChild(cell_3);
となります。
分かってしまえば何のことはないのですが、
tdタグの子オブジェクトして、
var input_text = document.createElement("input");
でinputタグを新たに生成し、setAttributeで各inputタグのtypeやvalueなどの属性情報を追加し、
appendChildでtdタグの子オブジェクトとして登録を行えばよかったんですよね。
なので、inputタグに限らず他のタグでも
createElement関数で新規生成させ、
appendChild関数で子オブジェクトして登録すればtable内にボタンだろうとテキスト入力だろうと行えるようになります。
