如何在for循环中动态创建几个按钮

Question

这是我的代码。 我想在特定div内附加4个按钮。 换句话说，我想将这4个按钮放在''之内。 现在可以使用，但它们不在div中。

getmyItems函数是一个包含一系列信息的函数，例如：title，description，age，...。

救命

getmyItems(param, function(data) {
var mtItem = JSON.stringify(data);
myItem = JSON.parse(mtItem);
var Item = document.getElementById('myItems');
for (var i = 0; i < myItem.results.length; i++) {
var buffer = "";
buffer += '<div class="act-time">';
buffer += '<div class="activity-body act-in">';
buffer += '<span class="arrow"></span>';
buffer += '<div class="text">';
buffer += '<p class="attribution">';
buffer += '<a href="#">'+myItem.results[i].title+'</a>';
buffer += myItem.results[i].description;
buffer += '</p>';
buffer += '</div>';
buffer += '</div>';
buffer += '</div>';

var div = document.createElement('div');
div.innerHTML = buffer;
//var elem = div.firstChild;
Item.appendChild(div);
var btn = document.createElement('input');
btn.setAttribute('type', 'button');
btn.setAttribute('class', 'btn btn-danger');
btn.value = "Delete";
btn.onclick = (function(i) {
  return function() {
    var c=confirm('Are you Sure? ');
    if (c==true)
    doDelete(myItem.results[i].item_id);

  };
})(i);
Item.appendChild(btn);
var show_btn=document.createElement('input');
show_btn.setAttribute('type','button');
show_btn.setAttribute('class','btn btn-primary');
show_btn.value="ShowInDetail";
show_btn.onclick=(function(i){
    return function(){
        showInDetail(myItem.results[i]);
        window.location='showInDetail.html';
    };
})(i);
Item.appendChild(show_btn);
var extend_btn=document.createElement('input');
extend_btn.setAttribute('class','btn btn-warning');
extend_btn.setAttribute('type','button');
extend_btn.value="Extend";
extend_btn.onclick=(function(i){
    return function(){
        extendItem(myItem.results[i]);
        window.location='extendItem.html';
    };
})(i);
Item.appendChild(extend_btn);
var bookmark=document.createElement('input');
bookmark.setAttribute('type','button');
bookmark.setAttribute('class','btn btn-primary');
bookmark.value='Bookmark';
bookmark.onclick=(function(i){
    return function(){
          var p={user_id:localStorage.getItem('user_id')};
          window.localStorage.setItem('this_item_id', myItem.results[i].item_id);
          getBookmarks(p, function(d){
            var bk=JSON.stringify(d);
            bk=JSON.parse(bk);
            if(bk.results){
                var l=0;
                for(var j in bk.results){
                    if(bk.results[j].item_id==localStorage.getItem('this_item_id')){
                        removeBookmark(bk.results[j]);
                        l=1;
                    }
                }if(l==0){
                        addBookmark(myItem.results[i]);
                    }

            }else{
                addBookmark(myItem.results[i]); 
            }           
          });
    };

})(i);
Item.appendChild(bookmark);
//document.getElementById(i).appendChild(btn);
 }
});

Answer 1

您要在哪个特定的div中使用它们？ 到目前为止，以这种方式，四个按钮位于myItens div的内部，如小提琴和以下代码所示。

var getmyItems = function(data) {
    var item = document.getElementById('myItems');
    for (var i = 0; i < data.length; i++) {
        var result = data[i];

        // creation of the buffer outer div
        var buffer = document.createElement('div');
        buffer.className = 'act-time';

        //creation of de activity-body
        var activity = document.createElement('div');
        activity.className = 'activity-body act-in';

        //creation of the first span
        var arrow = document.createElement('span');
        arrow.className = 'arrow';

        //creation of the most inner div
        var textDiv = document.createElement('div');
        textDiv.className = 'text';

        //creation of the content of the most inner div
        var attribution = '';
        attribution += '<p class="attribution">';
        attribution += '<a href="#">' + result.title + '</a>';
        attribution += result.description;
        attribution += '</p>';

        //initialize the text div
        textDiv.innerHTML = attribution;

        //put the arrow span inside the activity div
        activity.appendChild(arrow);

        // put the text div inside the activity div
        activity.appendChild(textDiv);

        //put the activity inside the buffer div
        // each time appendChild is applied the element is attach tho the end of the target element
        buffer.appendChild(activity);

        var div = document.createElement('div');
        div.appendChild(buffer);
        item.appendChild(div);

        var btn = document.createElement('input');
        btn.setAttribute('type', 'button');
        btn.setAttribute('class', 'btn btn-danger');
        btn.value = "Delete";
        btn.onclick = (function(i) {
            return function() {
                var c = confirm('Are you Sure? ');
                if (c === true) {
                    //do something;
                };
            };
        })(i);

        // now that all div are created you can choose which div you want to put the button inside.
        // in this I chose the buffer.
        buffer.appendChild(btn);

        var showBtn = document.createElement('input');
        showBtn.setAttribute('type', 'button');
        showBtn.setAttribute('class', 'btn btn-primary');
        showBtn.value = "ShowInDetail";
        showBtn.onclick = (function(i) {
            return function() {
                window.location = 'showInDetail.html';
                //do something
            };
        })(i);
        // button is append to the end of the buffer
        buffer.appendChild(showBtn);

        var extendBtn = document.createElement('input');
        extendBtn.setAttribute('class', 'btn btn-warning');
        extendBtn.setAttribute('type', 'button');
        extendBtn.value = "Extend";
        extendBtn.onclick = (function(i) {
            return function() {
                window.location = 'extendItem.html';
                //do something
            };
        })(i);
        // button is append to the end of the buffer
        buffer.appendChild(extendBtn);

        var bookmark = document.createElement('input');
        bookmark.setAttribute('type', 'button');
        bookmark.setAttribute('class', 'btn btn-primary');
        bookmark.value = 'Bookmark';
        bookmark.onclick = (function(i) {
            return function() {
                var p = { user_id: localStorage.getItem('user_id') };
                window.localStorage.setItem('this_item_id', myItem.results[i].item_id);
                //do something
            };

        })(i);
        // button is append to the end of the buffer
        buffer.appendChild(bookmark);
    }
};
var myItem = [{ title: 'person', description: 'familyName' }, { title: 'ohterPerson', description: 'otherFamilyName' }];
getmyItems(myItem);