Речь идет о динамически созданном div javascript, который работает не в теге сценария, а в теге тела HMTL

#javascript

Вопрос:

Я пытаюсь динамически создавать 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);
}
 

Комментарии:

1. Просто добавьте createDiv элемент в тело в конце

Ответ №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>