帶SQL信息的HTML新聞源

Question

我正在嘗試在包含數據庫內容的Facebook或Twitter之類的HTML中執行源。 我正在使用一個通用的div和使用JavaScript來克隆該通用的div，但我不能編輯克隆它後的每個元素的內容。 這是在HTML中執行Feed的最佳方式嗎？

的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>