javascript - 如何使用 AJAX 基于数据库中的值创建动态复选框？

Question

我正在尝试使用 AJAX 创建动态复选框，以便根据类别，屏幕上应显示复选框的数量。我有 HTML 示例代码，我想将其转换为 JS。

HTML 代码

<div id="check-awesome" class="form-group checkbox">
    <input type="checkbox" id="History">
    <label for="History">
        <span></span>
        <span class="check"></span>
        <span class="box"></span>
        History
    </label>
</div>

AJAX 代码

<script>
    $(document).ready(function(){
        $.ajax({
            type:'post',
            url:'/categories',
            contentType:'application/json',
            data: '{"_token":"<?php echo csrf_token() ?>"}',
            success:function(data) {
                for(i=0; i<=data.category_name.length;i ++)
                {
                    var checkbox = document.createElement('input');
                    checkbox.type="checkbox";
                    checkbox.value=data.category_name.category_id;
                    checkbox.id=data.category_name[i].category_name;
                    var label= document.createElement('label');
                    label.htmlFor=data.category_name[i].category_name;
                    var span=document.createElement('span');
                    label.appendChild(span);
                    var span1=document.createElement('span');
                    span1.className="check";
                    label.appendChild(span1);
                    var span2=document.createElement('span');
                    span2.className="box";
                    label.appendChild(span2);
                    label.appendChild(document.createTextNode(data.category_name[i].category_name));
                    var div= document.getElementById('check-awesome');
                    div.appendChild(label);
                    div.appendChild(checkbox);
                }
                return div;
            }
        });
    });
</script>

Answer 1

我已经发现了困惑，实际上我在附加顺序上搞砸了，实际上这些复选框有点不同，需要在创建后立即附加，因此代码应该是这样的。谢谢大家的帮助! :)

<script>
   $(document).ready(function(){
     $.ajax({
       type:'post',
       url:'/categories',
       contentType:'application/json',
       data: '{"_token":"<?php echo csrf_token() ?>"}',
       success:function(data) {
         for(i=0; i<=data.category_name.length;i ++)
           { 
             var div= document.createElement('div');
             div.id="check-awesome";
             div.className="form-group checkbox"
             var checkbox = document.createElement('input');
             checkbox.type="checkbox";
             checkbox.value=data.category_name.category_id;
             checkbox.id=data.category_name[i].category_name;
             div.appendChild(checkbox);
             var label= document.createElement('label');
             label.htmlFor=data.category_name[i].category_name;
             var span=document.createElement('span');
             label.appendChild(span);
             var span1=document.createElement('span');
             span1.className="check";
             label.appendChild(span1);
             var span2=document.createElement('span');
             span2.className="box";
             label.appendChild(span2);
             label.appendChild(document.createTextNode(data.category_name[i].category_name));
             div.appendChild(label);
             var get_div=document.getElementById('checkboxparent');
             get_div.appendChild(div);
           }
         return get_div;
       }
     });
   });
</script>