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

时间:2016-02-29 20:16:07

标签: javascript for-loop

这里是我的代码。我想在特定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);
 }
});

1 个答案:

答案 0 :(得分:0)

你想要什么特定的div?到目前为止,通过这种方式,四个按钮位于myItens div内,请参阅fiddle和下面的代码。

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);