###前提・実現したいこと
下記HTMLのDOMをJavaScriptで動的に生成したいと考えています。
自分なりに書き、動作は確認できました。
しかし冗長すぎるし、メンテし辛く間違いも起こりそうです。もっと良い書き方があるのではないかと…
スマートな書き方を教えていただきたいです。
再帰的に関数呼び出すことで、解決できるのでしょうか?
よろしくお願いいたします
###該当のソースコード
html
1<div> 2 <div class="context"> 3 <a href="http://localhost:3000"></a> 4 </div> 5 <div class="content"> 6 <div class="item-header"> 7 <a href="" class="profile"><span class="name">名前</span></a> 8 <small class="time">YYYY-MM-DD</small> 9 </div> 10 <div class="text-container"> 11 <p class="comment">コメント内容</p> 12 </div> 13 <div class="item-fotter"> 14 <span class="reply"></span> 15 <span class="retweet"></span> 16 </div> 17 </div> 18</div>
javascript
1//仮データ ループが周るかどうかの確認用 2var data = [["Jan","Feb","Mar","Apr"],["a", "b", "c", "d"]]; 3var fragment = document.createDocumentFragment(); 4for (var i = 0, len = data.length; i < len; i++) { 5 var items = data[i].length; 6 for (var j = 0; j < items; j++) { 7 var div = document.createElement('div'); 8 var context = document.createElement('div'); 9 context.classList.add('context'); 10 var a = document.createElement('a'); 11 a.setAttribute('href', 'http://localhost:3000'); 12 context.appendChild(a); 13 var content = document.createElement('div'); 14 content.classList.add('content'); 15 var content2 = document.createElement('div'); 16 content2.classList.add('item-header'); 17 var content3 = document.createElement('a'); 18 content3.classList.add('profile'); 19 var content4 = document.createElement('span'); 20 content4.classList.add('name'); 21 content4.insertAdjacentHTML('afterbegin','名前'); 22 var content5 = document.createElement('small'); 23 content5.classList.add('time'); 24 content5.insertAdjacentHTML('afterbegin','YYYY-MM-DD'); 25 content3.appendChild(content4); 26 content2.appendChild(content3); 27 content2.appendChild(content5); 28 //div.content 29 content.appendChild(content2); 30 var elmc = document.createElement('div'); 31 elmc.classList.add('text-container'); 32 var elmc2 = document.createElement('p'); 33 elmc2.classList.add('comment'); 34 elmc2.insertAdjacentHTML('afterbegin','コメント内容'); 35 //div.text-container 36 elmc.appendChild(elmc2); 37 var elmf = document.createElement('div'); 38 elmf.classList.add('item-fotter'); 39 var elmf2 = document.createElement('span'); 40 elmf2.classList.add('reply'); 41 var elmf3 = document.createElement('span'); 42 elmf3.classList.add('retweet'); 43 //div.item-fotter 44 elmf.appendChild(elmf2); 45 elmf.appendChild(elmf3); 46 //div 47 content.appendChild(elmc); 48 content.appendChild(elmf); 49 div.appendChild(context); 50 div.appendChild(content); 51 fragment.appendChild(div); 52 } 53}
■2017/10/02 1:55
「仮データ」とHTMLの関係性が分からなかったため、コードを修正しました。
javascript
1 2var data = [["URLA","名前A","日付A","コメントA"],["URLB","名前B","日付B","コメントB"],["URLC","名前C","日付C","コメントC"]]; 3 4var fragment = document.createDocumentFragment(); 5 6for (var i = 0, len = data.length; i < len; i++) { 7 8 var div = document.createElement('div'); 9 10 var context = document.createElement('div'); 11 context.classList.add('context'); 12 13 var a = document.createElement('a'); 14 a.setAttribute('href', data[i][0]); 15 context.appendChild(a); 16 17 var content = document.createElement('div'); 18 content.classList.add('content'); 19 20 var content2 = document.createElement('div'); 21 content2.classList.add('item-header'); 22 23 var content3 = document.createElement('a'); 24 content3.classList.add('profile'); 25 26 var content4 = document.createElement('span'); 27 content4.classList.add('name'); 28 content4.insertAdjacentHTML('afterbegin',data[i][1]); 29 30 var content5 = document.createElement('small'); 31 content5.classList.add('time'); 32 content5.insertAdjacentHTML('afterbegin',data[i][2]); 33 34 content3.appendChild(content4); 35 36 content2.appendChild(content3); 37 content2.appendChild(content5); 38 //div.content 39 content.appendChild(content2); 40 41 42 var elmc = document.createElement('div'); 43 elmc.classList.add('text-container'); 44 var elmc2 = document.createElement('p'); 45 elmc2.classList.add('comment'); 46 elmc2.insertAdjacentHTML('afterbegin',data[i][3]); 47 //div.text-container 48 elmc.appendChild(elmc2); 49 50 var elmf = document.createElement('div'); 51 elmf.classList.add('item-fotter'); 52 var elmf2 = document.createElement('span'); 53 elmf2.classList.add('reply'); 54 var elmf3 = document.createElement('span'); 55 elmf3.classList.add('retweet'); 56 //div.item-fotter 57 elmf.appendChild(elmf2); 58 elmf.appendChild(elmf3); 59 60 //div 61 content.appendChild(elmc); 62 content.appendChild(elmf); 63 64 div.appendChild(context); 65 div.appendChild(content); 66 fragment.appendChild(div); 67}
回答3件
あなたの回答
tips
プレビュー