如何克隆内容并在 javascript 中更改它

Question

我想通过克隆 96 显示一个从 *96 到 *01 的新数字，并在第二天推送 like this

<!-- HTML -->
<div class="content">
  <a class="days day-96" style="display:none;">
    *96
  </a>
  <a class="days day-95" style="display:none;">
    *95
  </a>
</div>

// JS
$(document).ready(function(){
    // Delay the action by 10000ms
    setTimeout(function(){
       $(".day-96").show();
    }, 0000);
    setTimeout(function(){
        $(".day-95").show();
     }, 5000);

 });

Answer 1

在 jquery 中有克隆元素的方法，在 vanilla js 中也类似

.cloneNode(true) 用于香草 js

// JS
$(document).ready(function(){
    var el = $(".days").clone(),
        count = 100
    $(".content").text("")
    while(count){
        var newEl = el.clone()
        newEl.html(count)
        $(".content").append(newEl)
        count--
    }
    animate(100)  // define delay in ms
 });
 
 function animate(delay){
    var i = 0,loop,days=$(".days")
    loop = setInterval(function(){
        if(i < days.length){days.eq(i).addClass("show")}
        else{clearInterval(loop)}
        i++
    },delay)
 }

.days {opacity:0;transition:all 0.2s ease;}
.show {opacity:1;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.16/tailwind.min.css" integrity="sha512-5D0ofs3AsWoKsspH9kCWlY7qGxnHvdN/Yz2rTNwD9L271Mno85s+5ERo03qk9SUNtdgOZ4A9t8kRDexkvnWByA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="content flex flex-wrap">
  <a class="days border p-2" style="display:block;"></a>
</div>