js动态添加的元素如何添加样式？

Question

如图所示,红色矩形内的元素都是动态渲染出来的，如何动态地去添加文字大小、颜色、布局等样式呢？是先写好样式添加类名呢，还是怎么搞呢？
自己拟定的布局如下：

        <div class="box">
            <ul>
                <li></li>
                <li></li>
            </ul>
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>

Answer 1

 <div class="box">
    <ul>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

如class='box' 一般将所有样式类直接加上去即可，如果是后期实在需要在js中修改，则通过选择器选中相应的节点进行修改，静态添加节点跟动态添加节点的区别是在渲染的时候是一次还是多次，动态的尽量做到最后一次性挂载到页面的节点上

Answer 2

先写好对应的css，然后追加的时候加上这些类名就可以了

Answer 3

这种完全不需要用js动态去添加样式，提前定义好样式就可以了，给你追加的字符串加上你已经定义和的class