jQuery向原生js转换，追加class类

在想用原生js写一个数字时钟的过程中，六个div分别实现时分秒的效果，之前使用jQuery方法现在需要转化回原生方式，之前是使用attr方法进行的，但是用原生js的方式的时候就无法进行了，尝试了很多classlist等方法添加，但显示出来的样式并不会发生改变，只是控制台发生变化，该如何解决呢

//添加类名，使得显示出数字样式
function addClass(element, value) {
        if (!element.className) {
            element.className = value;
        } else {
            newClassName = element.className;
            newClassName += " ";
            newClassName += value;
            element.className = newClassName;
        }
    }
//克隆生成六个num
    var a = 6
    for (var i = 2; i <= a; i++) {
        var node = document.querySelector('#num1').cloneNode(true)
        var circle = document.querySelector('.circle').cloneNode(true)
        node.setAttribute('id', 'num' + i)
        document.querySelector('.clock').append(node)
        if (i == 2 || i == 4) {
            document.querySelector('.clock').append(circle)
        }
    }
//添加样式
    for (var j = 0; j <= 9; j++) {
        addClass(num1, 'num-' + j)
        addClass(num2, 'num-' + j)
        addClass(num3, 'num-' + j)
        addClass(num4, 'num-' + j)
        addClass(num5, 'num-' + j)
        addClass(num6, 'num-' + j)
    }
    var ul = document.querySelector('.circle');
    ul.parentNode.removeChild(ul);
    // 获取系统当前时间
    function updateClock() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        if (hours < 10) {
            hours = "0" + hours;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }

        //转为字符串，再转为数组
        hours = hours.toString().split('');
        minutes = minutes.toString().split('');
        seconds = seconds.toString().split('');

//jQuery中式转为数组后使用attr方法添加
        //样式追加，设置多个属性值
        // display1.attr('class', cssClass + hours[0])
        // display2.attr('class', cssClass + hours[1])
        // display3.attr('class', cssClass + minutes[0])
        // display4.attr('class', cssClass + minutes[1])
        // display5.attr('class', cssClass + seconds[0])
        // display6.attr('class', cssClass + seconds[1])
//此处再使用上面的addClass方法无效
    }
    setInterval(updateClock, 1000);
    updateClock();

//原来的jQuery方式定义是这样的
var
display1 = $('#num1'),
display2 = $('#num2'),
display3 = $('#num3'),
display4 = $('#num4'),
display5 = $('#num5'),
display6 = $('#num6'),
cssClass = display1.attr('class') + ' num-';

html结构如下

```html
<div class="clock">
        <div id="num1" class="team">
            <div class="item h top"></div>
            <div class="item v left up"></div>
            <div class="item v right up"></div>
            <div class="item h mid"></div>
            <div class="item v left low"></div>
            <div class="item v right low"></div>
            <div class="item h low"></div>
        </div>
        <div class="circle team">
            <div class="up"></div>
            <div class="down"></div>
        </div>
    </div>

```

使用这种方式试试

/获取dom节点
    let img=document.querySelector('div');
    img.classNameList.add("name");

还是没太看懂哪里出了问题.

1. var display1 = $('#num1')
   使用原生可以用自定义方法
   function $(dom) { return document.querySelector(dom) }
2. cssClass = display1.attr('class') + ' num-'
   获取一个元素的class:
   display1.className + ' num-'
3. 添加一个class:
   display1.className += ' hahaha'
4. 给一个元素添加属性:
   display1.setAttribute('type', 'hour')

addClass(element, value) 这个方法中, 我不知道是否贴出了全部的js代码, 如果有声明 num1 - 6 元素的变量的话, 那这一段就没问题.