jQueryで要素を動的に追加する方法で、やったことのないやり方を見かけたので試してみました。
サンプルコード
HTML
1 | <div id="sample"></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // 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を内部的に生成することができるようです。
【参考サイト】
コメントが承認されるまで時間がかかります。