[フロントエンド]js動的要素の作成

先に学習したjqueryなので、純粋なjsの動的生成ノード要素にはまだ慣れていないので、ここで自分のテストを書いて、皆さんに役に立つことを願っています.
方法:
createElement作成要素
appendChild(); サブエレメントの追加
cssTextスタイルテキスト
createAttribute()属性の作成
createTextNode()テキストノードの作成
createAttribute('type').nodeValue属性値の設定
createElement('input').setAttributeNode()要素への属性の追加
Math.floor()捨位取整
Math.random()0~の乱数

<script type="text/javascript">

    /*      */  var arr = [1, 2, 3, 4, 5, 6, 7];
    var ul = document.createElement('ul');
    for(var i= 0; i<arr.length; i++) {
        var li = document.createElement('li');
        var text = document.createTextNode(arr[i]);
        li.appendChild(text);
        ul.appendChild(li);
        li.style.cssText = "list-style-type: none;float:left; width: 24px; height: 24px; margin-right: 5px; border: 1px solid #ccc; text-align: center; line-height: 24px;";
    }
    document.body.appendChild(ul);

    /*      */  var button = document.createElement("input");
    var buttonType = document.createAttribute('type');  //       var buttonValue = document.createAttribute('value');
    buttonType.nodeValue = 'button';  //        buttonValue.nodeValue = '  ';
    button.setAttributeNode(buttonType);  //       button.setAttributeNode(buttonValue);
    button.style.cssText = "height: 26px; padding: 0 10px;";
    document.body.appendChild(button);

    /*        */  button.addEventListener('click', function() {
        var div = document.createElement('div');
        div.style.clear = 'both';
        div.style.height = 32+'px';
        div.style.marginTop = 5+'px';
        var ul = document.createElement('ul');
        for(var i= 0; i<arr.length; i++) {
            var li = document.createElement('li');
            var text = document.createTextNode(arr[Math.floor(Math.random() * arr.length)]);
            li.appendChild(text);
            ul.appendChild(li);
            li.style.cssText = "list-style-type: none;float:left; width: 24px; height: 24px; margin-right: 5px; border: 1px solid #ccc; text-align: center; line-height: 24px;";
        }
        div.appendChild(ul);
        document.body.appendChild(div);
    }, false);
    
</script>

注目してくれてありがとう!