我们怎样才能追加多个' div'现有' div的元素javascript DOM中的元素?

时间:2017-07-24 10:08:59

标签: javascript html css dom web

我试图追加两个孩子' div'一个父母的不同类别的元素' div' element.Here是我的代码

//javascript
document.getElementById('add').addEventListener('click',function(){
var task = document.getElementById('task').value;
if(task) addTodoTask(task);
});

function addTodoTask(text){
var list = document.getElementById('todo');

var item = document.createElement('li');

var row = document.createElement('div'); //parent inthis case
row.classList.add('row');

var task = document.createElement('div'); //child 1
task.classList.add('col-md-8');
task.classList.add('col-sm-8');
task.classList.add('col-xs-8');
task.classList.add('task');
task.innerText = text;

var buttons = document.createElement('div'); //child2
task.classList.add('col-md-4');
task.classList.add('col-sm-4');
task.classList.add('col-xs-4');

row.appendChild(task);
row.appendChild(buttons);
item.appendChild(row);
list.appendChild(item);

console.log(list);
}

我想将task(div),buttons(div)追加到row(也是div),即child1,child2应该追加到父级,三者都是&#39; div。< / p>

当我这样做时,它正在给予

<div class="row">
   <div class="col-md-8 col-sm-8 col-xs-8 task col-md-4 col-sm-4 col-xs-
      4">hi there
</div><div></div></div>

但我想要

<div class="row ">
            <div class="col-md-8 col-sm-8 col-xs-8 task">
                            hi there
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4">
                    some other elements 
            </div>
</div>

我该如何解决?任何人都可以帮助我......

1 个答案:

答案 0 :(得分:0)

更改此

public class ContactsModel implements RealmModel {
    @PrimaryKey
    private int id;
    private int contactID;
    private String username;
    private String phone;
    private String phoneTmp;
    private boolean Linked;
    private boolean Activate;
    private boolean Exist;
    private String image;
    private String status;
    private String status_date;
    @Expose
    private String userState;

    public ContactsModel() {

    }
    public String getPhoneTmp() {
        return phoneTmp;
    }

    public void setPhoneTmp(String phoneTmp) {
        this.phoneTmp = phoneTmp;
    }
    public String getUserState() {
        return userState;
    }

    public void setUserState(String userState) {
        this.userState = userState;
    }


    public boolean isActivate() {
        return Activate;
    }

    public void setActivate(boolean activate) {
        Activate = activate;
    }

    public boolean isExist() {
        return Exist;
    }

    public void setExist(boolean exist) {
        Exist = exist;
    }


    public int getContactID() {
        return contactID;
    }

    public void setContactID(int contactID) {
        this.contactID = contactID;
    }


    public String getStatus_date() {
        return status_date;
    }

    public void setStatus_date(String status_date) {
        this.status_date = status_date;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public boolean isLinked() {
        return Linked;
    }

    public void setLinked(boolean linked) {
        Linked = linked;
    }

    public String getImage() {
        return image;
    }

    public void setImage(String image) {
        this.image = image;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }
}

@estates = Estate.all # or another default scope
@estates = @estates.where(surface_min: params[:surface_min]) if params[:surface_min]
@estates = @estates.where(surface_max: params[:surface_max]) if params[:surface_max]
...
  

在复制粘贴时要小心编辑变量名称