附加MDL元素

Question

我想自动添加输入文件字段。我正在使用MDL库。

这是我的代码的结果，

第二个字段是自动添加的字段。

我的js代码有2个问题：

• 图标未显示
• 上传的文件名未显示在输入文本字段
上

这是我的HTML：

  <div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
  <input class="mdl-textfield__input"  placeholder="Upload your HTML file" type="text" id="TEXT_HTML" 
    readonly />
   <div class="mdl-button mdl-button--icon mdl-button--file">
             <i class="material-icons">attach_file</i>
                  <input type="file" name="NAME" id="fileHTML" accept="text/html" 
   onchange="document.getElementById('TEXT_HTML').value=this.files[0].name;
    readHTML(this);" />
                        </div>
                 </div>

这是我的JS：

i = 0;
function AddFieldH() {

    i++;

    var div = document.createElement('div');
    div.setAttribute("class", "mdl-textfield mdl-js-textfield mdl-textfield--file");

    var input = document.createElement("INPUT");
    input.setAttribute("class", "mdl-textfield__input");
    input.setAttribute("placeholder", "Upload your HTML file");
    input.setAttribute("type", "text");
    input.setAttribute("id", "TEXT_HTML" + i);

    var div2 = document.createElement('div');
    div2.setAttribute("class", "mdl-button mdl-button--icon mdl-button--file");

    var i = document.createElement('i');
    i.setAttribute("class", "material-icon");

////////doesn't work
    i.setAttribute("type", "attach_file");

    var script = document.createElement("script");
    script.setAttribute('type', 'text/javascript');
    script.innerHTML = 'document.getElementById("TEXT_HTML"+i).value=this.files[0].name;';

    var input2 = document.createElement("INPUT");
    input2.setAttribute("onchange", script);
////////////////

    input2.setAttribute("accept", "text/html");
    input2.setAttribute("type", "file");
    input2.setAttribute("id", "fileHTML" + i);

    div2.appendChild(input2);
    div2.appendChild(i);
    div.appendChild(input);
    div.appendChild(div2);

    document.getElementById("html").appendChild(div);}

任何帮助，谢谢