javascript - Bootstrap 列表组 : is it possible to duplicate item?

Question

我是 Web 开发领域的新手，现在正在使用 bootstrap 和 jquery 启动一个项目。

我对网络开发的理解可能是错误的，但无论如何我都会尝试问这个:

我有一个列表组的卡片。每张卡片作为一个项目(只是 li，不使用 list-group-item 来保留 card 样式)。

我希望能够动态插入新的卡。目前我正在使用 js/jquery 手动添加 HTML 代码。例如:

let card_class = document.createElement("div");
card_class.setAttribute("class", "card mx-3 my-5");
card_class.setAttribute("name", "card-class");
let row_class = document.createElement("div");
row_class.setAttribute("class", "row no-gutters bg-dark text-white-50");
row_class.setAttribute("name", "row-class");
let profile_class = '<div class="col-auto">'+
'<img src="profile.jpg" style="height:50px;" class="img-fluid" alt=""></img></div>';
let col_class = document.createElement("div");
col_class.setAttribute("class", "col");
col_class.setAttribute("name", "col-class");
let card_col_class = document.createElement("div");
card_col_class.setAttribute("class", "card-block px-2");
card_col_class.setAttribute("name", "card-col-class");
let card_footer = '<div class="card-footer"><span class="btn-toolbar btn-group-sm px-5">'+
    '<button type="button" class="btn text-white-50 mx-auto rounded-circle" data-toggle="modal" data-target="#post-comment"><i class="far fa-comment-alt"></i></button>'+
    '<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="fas fa-retweet"></i></button>'+
    '<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="far fa-heart"></i></button>'+
    '<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="far fa-share-square"></i></button></span></div>';

//get the tweet info (object parameter) and put it in the header and body of the card.
let username = tweet_info.username;
let tweet = tweet_info.tweet;
let card_header = '<div class="card-header"><a href="#" class="link text-decoration-none">@'+username+'</a></div>';
let card_body = '<div class="card-body" style="white-space: pre-wrap;" onclick="setInfo(this)" type="button"'+
                'data-toggle="modal" data-target="#tweet-id">'+tweet+"</div>";

//now actually add the card to the html.
$("div[name='main-content'").prepend(card_class);
$("div[name='card-class']").append(row_class);
$("div[name='row-class']").append(profile_class);
$("div[name='row-class']").append(col_class);
$("div[name='col-class']").append(card_col_class);
$("div[name='card-col-class']").append(card_header);
$("div[name='card-col-class']").append(card_body);
$("div[name='card-col-class']"]).append(card_footer);   

我想知道的是，如何简化我的代码。

我想，是否有可能拿一个 li 项目，复制它，然后稍微改变一下？

---

编辑:

例如，要复制的 HTML 代码(与 js 代码相同):

<li class="card">
    <div class="row no-gutters bg-dark text-white-50">
        <div class="col-auto">
            <img src="profile.jpg" style="height:50px;" class="img-fluid" alt="">
        </div>
        <div class="col">
            <div class="card-block px-2">
                <div class="card-header"><a href="#" class="link text-decoration-none">@Username</a></div>
                <div class="card-body" onclick="setInfo(this)" type="button" data-toggle="modal" data-target="#tweet-id">Content</div>
                <div class="card-footer">
                    <span class="btn-toolbar btn-group-sm px-5">
                        <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-comment-alt"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="collapse" data-target="#comments"><i class="far fa-comments"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="fas fa-retweet"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-heart"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-share-square"></i></button>
                     </span>
                 </div>
             </div>
         </div>
     </div>
 </li>

Answer 1

您可以使用 .clone() 克隆您的 html 元素，然后使用 .find() 更改此克隆元素内的任何元素，最后将其附加到您的 ul 使用 appendTo 方法。

演示代码:

$("#cloned").on("click", function() {
  var cln = $("ul li:first").clone() //cloned first li
  cln.find(".link").text("something") //use find and change username
  cln.find(".card-body").text("something something...") //use find and change content
  $(cln).appendTo($("ul")) //append to ul
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="card">
    <div class="row no-gutters bg-dark text-white-50">
      <div class="col-auto">
        <img src="profile.jpg" style="height:50px;" class="img-fluid" alt="">
      </div>
      <div class="col">
        <div class="card-block px-2">
          <div class="card-header"><a href="#" class="link text-decoration-none">@Username</a></div>
          <div class="card-body" onclick="setInfo(this)" type="button" data-toggle="modal" data-target="#tweet-id">Content</div>
          <div class="card-footer">
            <span class="btn-toolbar btn-group-sm px-5">
                        <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-comment-alt"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="collapse" data-target="#comments"><i class="far fa-comments"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="fas fa-retweet"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-heart"></i></button>
                         <button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-share-square"></i></button>
                     </span>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>
<button id="cloned">Clone Me</button>