带有SQL信息的HTML新闻源

时间:2017-04-17 17:30:12

标签: javascript jquery html feed

我正在尝试使用包含数据库内容的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>

1 个答案:

答案 0 :(得分:1)

clone()返回可以使用jQuery操作的对象。

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

function addFeed() {
  var item = $("#template2 div.item").clone();
  $(item).find("h3").html("New Feed");
  $("#main1").append(item);
}
&#13;
.feed {
  border: 1px solid black;
  width: 150px;
}

.item {
  background-color: lightgreen;
}

.item:nth-child(odd) {
  background-color: lightblue;
}
&#13;
<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>
&#13;
&#13;
&#13;