SQL情報付きHTMLニュースフィード

Question

データベースの内容を含むFacebookやTwitterのようなHTMLでフィードを作成しようとしています。 私はジェネリックdivを使用していて、そのジェネリックdivをクローンするためにjavascriptを使用していますが、それを複製した後に各要素の内容を編集することはできません。 これはHTMLでフィードを実行する最善の方法ですか？

はJavaScript

for(i=0 ; i < 5 ; i++){0 
     var item = $("#template2 div.item").clone(); 
     item.getElementById("title").text("aaaa"); //4 testing 
     $("#main1").append(item); 
} 

HTML

<div id=template2> 
    <div class="item"> 
    <div class="row"> 
     <div class="col-sm-10"> 
     <h3 id="title"></h3> 
     </div> 
    </div> 
    <div class="row divider"> 
     <div class="col-sm-12"><hr></div> 
    </div> 
</div> 
</div> 

Answer 1

clone()リターンはあなたがjQueryのを使用して操作することができ、そのオブジェクト。

$('#addFeed').click(function() { 
 
    addFeed(); 
 
}) 
 

 
function addFeed() { 
 
    var item = $("#template2 div.item").clone(); 
 
    $(item).find("h3").html("New Feed"); 
 
    $("#main1").append(item); 
 
}

.feed { 
 
    border: 1px solid black; 
 
    width: 150px; 
 
} 
 

 
.item { 
 
    background-color: lightgreen; 
 
} 
 

 
.item:nth-child(odd) { 
 
    background-color: lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id=template2> 
 
    <div class="item"> 
 
    <div class="row"> 
 
     <div class="col-sm-10"> 
 
     <h3 id="title"></h3> 
 
     </div> 
 
    </div> 
 
    <div class="row divider"> 
 
     <div class="col-sm-12"> 
 
     <hr> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div id="main1" class="feed"> 
 

 
</div> 
 
<button id="addFeed">Add Feed</button>