Html 如何使用Jquery动态创建div/card

所以我有一个卡片容器，它将保存我想要动态填充的信息。我现在用静态信息填充它。我一直在试图找到一种方法，使用jquery克隆初始div，然后在卡片中填充信息并添加，但我感到非常沮丧，似乎无法找到解决方法。下面是我使用的容器。第一个想法是尝试将div保存在一个变量中，然后在我的文档部分调用它，但是出于某种原因，我可以编辑它，因为它不是一个函数

    <div class="blog-container">

      <div class="blog-header">
        <div class="blog-author--no-cover">
          <h3>Russ Beye</h3>
        </div>
      </div>

      <div class="blog-body">
        <div class="blog-title">
          <h1><a href="#">This Post Has No Cover Image</a></h1>
        </div>
        <div class="blog-summary">
          <p>Here is an example of a post without a cover image. You don't always have to have a cover image. In
            fact, leaving them out from time to time and disrupt the predictive flow and make the overall design
            more interesting. Something to think about.</p>
        </div>
        <div class="blog-tags">
          <ul>
            <li><a href="#">design</a></li>
            <li><a href="#">web dev</a></li>
            <li><a href="#">css</a></li>
          </ul>
        </div>
      </div>

      <div class="blog-footer">
        <ul>
          <li class="published-date">12 days ago</li>
          <li class="comments"><a href="#"><svg class="icon-bubble">
                <use xlink:href="#icon-bubble"></use>
              </svg><span class="numero">8</span></a></li>
          <li class="shares"><a href="#"><svg class="icon-star">
                <use xlink:href="#icon-star"></use>
              </svg><span class="numero">3</span></a></li>
        </ul>
      </div>
    </div>

罗斯贝耶
下面是一个没有封面图片的帖子的例子。你不必总是有封面图片。在里面
事实上，时不时地将它们排除在外，破坏预测流程，并进行总体设计
更有趣。想一想







12天前

这是下面的文档区域，我只是生成随机推文，我希望能够创建上面的div，并使用jquery编辑某些点，然后附加文档。任何建议或线索都很好

$(document).ready(function () {
  var $card = $(".blog-container").prop('outerHTML')
  var $body = $('body');
  var $test = $('col2-main')
  //$body.html('');
  var index = streams.home.length - 1;
  while (index >= 0) {
    var tweet = streams.home[index];
    var $tweet = $('<div></div>');
    $tweet.text('@' + tweet.user + ': ' + tweet.message);
    $(".blog-summary").find("p").text('@' + tweet.user + ': ' + tweet.message);
    $(".col2-main").append($card)
    index -= 1;
  }
});

$（文档）.ready（函数（）{
var$card=$（“.blog容器”）.prop（'outerHTML'）
变量$body=$（'body'）；
var$test=$（'col2-main'）
//$body.html（“”）；
var指数=streams.home.length-1；
而（索引>=0）{
var tweet=streams.home[index]；
var$tweet=$（''）；
$tweet.text（“@”+tweet.user+”：“+tweet.message）；
$（“.blog summary”）.find（“p”）.text（“@”+tweet.user+”：“+tweet.message）；
$（“.col2 main”）.append（$card）
指数-=1；
}
});

可能需要是

$card.find（“.blog summary p”）

当前如果有效，它会添加新的部分，但它会一次又一次地添加相同的文本，因为它会查看当前的dom来替换所有当前的p。我希望有一种方法让div远离它，这样我就可以生成一个“新的”div并用新的infoYa Uncaught TypeError填充它：$card.find不是我一直得到的函数。Ups应该是

$（$card）。find（“.blog summary p”）

只需获取数组的第一个元素就可以让克隆正常工作。因为每次它被克隆的时候，它都越来越大，所以我只取了第一个索引并编辑了那个索引。多谢朋友！