ここでは、JQuery において、HTML 要素を新規に作成するサンプルスクリプトを掲載しています。
スポンサーリンク
サンプル HTML
紹介するサンプルは次の HTML に対して要素を追加しています。
<body>
<div name="div1"></div>
</body>
HTML要素を追加するサンプル
HTML 要素を追加するサンプルスクリプトです。上記の div タグにテーブルを追加しています。詳細はサンプル内のコメントを参照ください。
$(function () {
// table タグを作成する
var tableTag = $("<table />");
// tr タグを作成する
var trTag = $("<tr />");
// tr タグの子要素として th タグを追加する
trTag.append($("<th />").html("名前"));
// tr タグの子要素として td タグを追加する
trTag.append($("<td />").html("大橋巨人"));
// tableタグの子要素として 上記で作成した tr タグを追加する
tableTag.append(trTag);
// HTMLに定義されているdivタグ内に作成したTABLEタグの内容を追加する
$('div[name=div1]').append(tableTag);
});
出力結果
サンプルを実行した出力結果です。期待した結果と異なっているのは、IE11 が解釈した結果を掲載しているためです。
<div name="div1">
<table>
<tbody>
<tr>
<th>名前</th>
<td>大橋巨人</td>
</tr>
</tbody>
</table>
</div>