使用 javascript 生成 div 和 input 标签

Question

我正在尝试动态生成 textFields，但是由于我使用的是 Material design-lite，我不明白如何生成 div 类和输入类属性以及标签标签。

这是 HTML 中的代码：

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">

        <input class="mdl-textfield__input" type="text" id="sample3" name="passengername">

        <label class="mdl-textfield__label" for="sample3">Passenger Name :</label>

</div>

进行了一些搜索并找到了以下脚本，但不知道如何为标签生成标签标签和类属性：

function addFields(){

    var number = document.getElementById("member").value;

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

    while (container.hasChildNodes()) {

        container.removeChild(container.lastChild);

    }

    for (i=0;i<number;i++){

        var div = document.createElement('div');

        container.appendChild(document.createTextNode("passengername " + (i+1)));

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

        input.type = "text";

        container.appendChild(input);

        container.appendChild(document.createElement("br"));

    }

}

该代码生成文本字段，但没有我在 css 中应用的设计，因为我没有使用 js 生成 class 属性。