JavaScript动态创建div及表单在script标签中不生效问题咨询

你已经完成了所有动态表单元素的创建逻辑，但缺少将生成的div节点挂载到页面现有DOM树的步骤，你创建的所有元素仅存在于JS内存中，不会被渲染到页面上。

1. 首先在你的HTML页面中提前准备一个用于容纳动态生成内容的容器，比如：

<div id="formContainer"></div>

2. 在addFields函数的末尾，将你创建的createDiv追加到上述容器中，同时可以补充删除按钮的点击逻辑，修复后的完整JS代码如下：

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);
    // 补充删除按钮点击逻辑
    delete_Row_button.onclick = function() {
        this.parentElement.remove();
    }
    createDiv.appendChild(delete_Row_button);
    divID++;
    var br = document.createElement("br");
    createDiv.appendChild(br);
    // 核心新增：将创建好的div挂载到页面容器中
    document.getElementById('formContainer').appendChild(createDiv);
}

如果你不需要单独指定容器，也可以直接挂载到body下，将最后一行替换为document.body.appendChild(createDiv)即可。

内容的提问来源于stack exchange，提问作者Usman Jutt