HTML 条动态消息包含 SQL 条信息

Question

我正在尝试在 HTML 中创建包含数据库内容的 feed，例如 facebook 或 twitter。我正在使用通用 div 并使用 javascript 克隆通用 div 但我无法在克隆后编辑每个元素的内容。这是在 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() returns 您可以使用 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>

HTML 条动态消息包含 SQL 条信息

HTML news feed with SQL info

javascript

jquery

html

feed