javascript - 这是关于 javascript 动态创建的 div，它不在脚本标签中工作，而是在 HMTL 的正文标签中工作

Question

我正在尝试动态创建 div 并在 javascript 中附加动态创建的表单，但它不起作用。在我看来，这是正确的代码，但它不起作用。

var id = 1;
var divID = 1;
function addFields()
{
    var createDiv = document.createElement("div");
    createDiv.setAttribute("id","myDiv_"+divID);
    var fieldsName = ['First Name', 'Last Name', 'Email', 'Age'];
    var idArr = ['fname', 'lname', 'email', 'age'];


    for(var i = 0; i < fieldsName.length; i++)
    {
        var input = document.createElement("input");
        input.name = fieldsName[i];
        input.type = "text";
        input.placeholder = fieldsName[i];
        input.id = idArr[i] + "_" + id;
        id++;
        createDiv.appendChild(input);
    }
    var delete_Row_button = document.createElement("button");
    var deleteText = document.createTextNode("Delete Row");
    delete_Row_button.appendChild(deleteText);
    createDiv.appendChild(delete_Row_button);
    divID++;
    var br = document.createElement("br");
    createDiv.appendChild(br);
}

标签： javascript

Answer 1

代码运行良好，您只需要将创建的 html 附加到父元素：

  var id = 1;
        var divID = 1;

        function addFields()
        {
            var createDiv = document.createElement("div");
            createDiv.setAttribute("id","myDiv_"+divID);
            var fieldsName = ['First Name', 'Last Name', 'Email', 'Age'];
            var idArr = ['fname', 'lname', 'email', 'age'];


            for(var i = 0; i < fieldsName.length; i++)
            {
                var input = document.createElement("input");
                input.name = fieldsName[i];
                input.type = "text";
                input.placeholder = fieldsName[i];
                input.id = idArr[i] + "_" + id;
                id++;
                createDiv.appendChild(input);
            }
            var delete_Row_button = document.createElement("button");
            var deleteText = document.createTextNode("Delete Row");
            delete_Row_button.appendChild(deleteText);
            createDiv.appendChild(delete_Row_button);
            divID++;
            var br = document.createElement("br");
            createDiv.appendChild(br);
            
            document.getElementById('content').appendChild(createDiv);
        }

<button onClick="addFields()">Add Field</button>
<br/>
<div id="content"></div>