jQuery与原生JS方法转换

源代码写的是jQuery，但是由于要求不能使用库，需要改为原生JS的方式，可是在尝试了网上不同的cloneNode方式都无法显示，想问这样的该如何转化，class的num-是css样式属性，num2、3、4是克隆出来想添加的id

var
        display1 = $('#num1'),
        cssClasses1 = display1.attr('class') + ' num-',
        clock = $('.clock'),
        newCircle = $('.circle').clone();
    $('.circle').remove();

    clock.append(
        display1.clone().attr('id', 'num2'),
        newCircle.clone(),
        display1.clone().attr('id', 'num3'),
        display1.clone().attr('id', 'num4'),
        newCircle.clone(),
        display1.clone().attr('id', 'num5'),
        display1.clone().attr('id', 'num6'),
    )

    var display2 = $('#num2'),
        display3 = $('#num3'),
        display4 = $('#num4'),
        display5 = $('#num5'),
        display6 = $('#num6');

这是html结构部分

<div class="clock">
        <div id="num1" class="team">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="circle team">
            <div class="up"></div>
            <div class="down"></div>
        </div>
    </div>
给你找了一篇非常好的博客，你可以看看是否有帮助，链接：原生js模拟jQuery选择器功能及方法

var a = 10
for(var i =2;i<=a;i++){
var node =document.querySelector('#num1').cloneNode(true)
node.setAttribute('id','num'+i)
console.log(node)
document.querySelector('.clock').append(node)
var circle =document.querySelector('.circle').cloneNode(true)
document.querySelector('.clock').append(circle)
}

img