Bootstrap list-group: is it possible to duplicate item?

user_6172375 0
Viewed 107

I'm a newbie in web development and am now starting a project using bootstrap and jquery as a start.

I might be mistaken in my understanding of web development, but I'll try asking this anyway:

I have a list-group of cards. Each card as an item (just li, not using list-group-item to preserve card style).

I want to be able to dynamically insert new cards. Currently I'm manually adding the HTML code using js/jquery. For example:

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);

What I wondered is, how can I simplify my code.

I thought, is it possible to for example take an li item, duplicate it and just change it a bit?

Edit:

For example, the HTML code to duplicate (same as the js code):

<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>
bootstrap-4 twitter-bootstrap html jquery javascript
1 Answers

You can use .clone() to clone your html element then use .find() to change any element inside this cloned element and finally append same to your ul using appendTo method.

Demo Code :

$("#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>

user_106064000
Related