JavaScriptで任意の場所にHTML要素を追加させる

任意の場所にHTML要素を追加させるためには、任意の要素にidを振り、そのidを親idとすることで可能になります。

例は以下の通りです。

HTML文

<thead>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</thead>
<tbody id="tablebody">
</tbody>

JavaScript

function sample() {
    var tr_element = document.createElement('tr')
    var parent_object = document.getElementById('tablebody');
    tr_element.innerHTML = '<tr><td>cell11</td><td>cell21</td></tr>';
    parent_object.appendChild(tr_element);
}

この関数を実行すると、tbodyタグの中にinnerHTMLで指定した文が追加されます。

このようにappendChild()を用いることで、任意の場所の中に任意の要素を追加することが出来ます。