jQueryで要素を動的に追加する方法で、やったことのないやり方を見かけたので試してみました。
サンプルコード
HTML
<div id="sample"></div>
JavaScript
// liに追加する内容
var arr = ['リスト1', 'リスト2', 'リスト3', 'リスト4'];
$(function() {
// ulタグを生成してinsertに追加
var insert = $('<ul>').addClass('list');
for(var i = 0; i < arr.length; i++) {
// liタグを生成してテキスト追加
var newLi = $('<li>').text(arr[i]);
// insertに生成したliタグを追加
insert.append(newLi);
}
// insertを#sample内に追加
$('#sample').append(insert);
});
jQueryで要素を動的に追加するデモページ
$(‘<ul>’)などのようにHTMLタグを直接記述することで、HTMLを内部的に生成することができるようです。
【参考サイト】
コメントが承認されるまで時間がかかります。