динамически создавать флажки в JavaScript

Question

Я пытаюсь создать флажки динамически. Но я не знаю, что не так с этим кодом. Кто-нибудь, пожалуйста, помогите. Прокомментируйте, если вам нужна дополнительная информация.

$.getJSON(url, function(json) { 
    console.log(json); 
    console.log(json.items.length); 

    for (var i = 0; i < json.items.length; i++) { 

    console.log(json.items[i].name); 

    var checkbox = document.createElement('input'); 
    checkbox.type = "checkbox"; 
    checkbox.name = "name" + json.items[i].name; 
    checkbox.value = "value"; 
    checkbox.id = "id" + i; 
    } 
}); 

Спасибо

Answer 1

Вы никогда не кажется, что добавление этих динамически создаваемых флажков вашего DOM, так это checkbox переменная, которая создается внутри цикла просто получает мусора. Если вы хотите, чтобы эти флажки появляться где-то убедитесь, что вы на самом деле добавить их в DOM:

document.body.appendChild(checkbox); 

Конечно, вместо того, чтобы просто добавляя их к body в DOM вы можете захотеть добавить их в какой-то конкретный элемент в этом случае вам может понадобиться, чтобы получить этот элемент первым:

var someDiv = document.getElementById('someId'); 
someDiv.appendChild(checkbox); 

или если вы используете JQuery:

for (var i = 0; i < json.items.length; i++) { 
    $('<input />', { 
     type : 'checkbox', 
     id: 'id' + i, 
     name: 'name' + json.items[i].name, 
     value: 'value' 
    }) 
    .appendTo("#someId"); 
} 

где вы Obvio usly имеют соответствующий контейнер укрывать эти новые добавленные элементы:

<div id="someId"></div> 

Answer 2

Только то, что сказал Дарин,

вам нужно добавить динамически созданный элемент в DOM. Так что в вашем случае

 $.getJSON(url, function(json) { 
     console.log(json); 
     console.log(json.items.length); 

     for(var i=0;i<json.items.length;i++){ 

     console.log(json.items[i].name); 

     var checkbox = document.createElement('input'); 
     checkbox.type = "checkbox"; 
     checkbox.name = "name"+json.items[i].name; 
     checkbox.value = "value"; 
     checkbox.id = "id"+i; 
     document.body.appendChild(checkbox); 
     } 
    }); 

ИЛИ Вы можете создать DIV в вашем HTML-листе, и добавьте ваши флажков к этому, так что это будет что-то вроде ..

var div = document.getElementById('div'); 
    for(var i=0;i<json.items.length;i++){ 

    console.log(json.items[i].name); 

    var checkbox = document.createElement('input'); 
    checkbox.type = "checkbox"; 
    checkbox.name = "name"+json.items[i].name; 
    checkbox.value = "value"; 
    checkbox.id = "id"+i; 
    div.appendChild(checkbox); 
    } 
}); 

Answer 3

вам нужно добавить флажок в каком-то контейнере html. что у вас есть DIV с идентификатором append, как показано ниже,

<div id="append" name="append">Append here</div> 

и ваш динамически созданным флажок добавлен к этим делам.

ЯШ: не

$.getJSON(url, function(json) { 
     console.log(json); 
     console.log(json.items.length); 

     for (var i = 0; i < json.items.length; i++) { 

      var checkbox = document.createElement('input'); 
      checkbox.type = "checkbox"; 
      checkbox.name = "name" + json.items[i].name; 
      checkbox.value = "value"; 
      checkbox.id = "id" + i; 
      document.getElementById('append').appendChild(checkbox); 

     } 
});