mui为什么使用className设置文本框的class不起作用

 <script type="text/javascript">
            window.onload = function() {

                var main = document.getElementById("main");

                var bt = document.getElementById("bt");

                var i = 1;

                bt.onclick = function() {

                    var len = main.getElementsByTagName("li").length;

                    var oul = main.getElementsByTagName("ul")[0];

                    var oli = document.createElement("li");

                    var input = document.createElement("input");

                    var button = document.createElement("input");

                    input.id = i;

                    input.type = "text";

                    input.placeholder = "请输入选项！";

                    input.className = "mui-input-group mui-input-clear";


                    button.type = "button";

                    button.id = "bt" + len;

                    button.value = "点击删除";

                    button.class = "mui-btn-blue";

                    oli.appendChild(input);

                    oli.appendChild(button);

                    oul.appendChild(oli);

                    //button.onclick="alert(this.id)";
                    button.onclick = function() {

                        button.parentNode.remove(button.parentNode);

                    }
                    i++;
                }

            }
        </script>

第三方ui都是重新更改过dom结构的，自己看api调用对应组件的方法进行初始化，直接加样式到原生的dom对象上大部分没用