按钮附加到div

Question

我必须仅使用js来创建“待办事项列表”。我已经使用input，textarea和date输入创建了div，如何在div中添加“ edit”和“ save”按钮。不知道如何使用按钮功能添加它们。任何想法如何将它们添加到div中？这是我的JavaScript代码。

JS

function ToDo() {
    this.divleft= new divleft()
    this.saveButton = new Button('Save')
    this.editButton = new Button('Edit')

   
    this.initialize = function () {
        this.divleft.render();
        this.saveButton.render();
        this.editButton.render();


    }
}
function divleft() {
  
    this.render = function () {
        
        this.div = document.createElement('div');
        this.div.setAttribute('id', 'divleft');
        this.label = document.createElement('label');
        this.input = document.createElement("input");
        this.input.setAttribute("type", "text");
        this.textarea = document.createElement("textarea");
        this.labelt = document.createElement('label');
        this.labeld=document.createElement('label');
        this.inputd=document.createElement('input');
        this.inputd.setAttribute('type', 'date');
        this.br1=document.createElement('br');
        this.br2=document.createElement('br');
        this.br3=document.createElement('br');
        this.br4=document.createElement('br');

        document.body.appendChild(this.div);
        this.div.appendChild(this.label).appendChild(this.input);
        this.div.appendChild(this.br1);
        this.div.appendChild(this.br2);
        this.div.appendChild(this.labelt).appendChild(this.textarea);
        this.div.appendChild(this.br3);
        this.div.appendChild(this.br4);
        this.div.appendChild(this.labeld).appendChild(this.inputd);
        
        
    }
    
}

function Button(text) {
    this.text = text;

    this.render = function () {
        var button = document.createElement("button");
        button.innerText = text;
        document.body.appendChild(button);
    }
}

function Break() {
    this.render = function () {
        var br = document.createElement("br");
        document.body.appendChild(br);
    }
}
new ToDo().initialize();

#divleft{
    width: 190px;
    height:150px;
    Border: 1px solid black;
    padding:10px;
}

Answer 1

您可以将要渲染到的div传递到渲染函数。例如，您可以传递创建的div并在那里渲染。

function ToDo() {
    this.divleft= new divleft()
    this.saveButton = new Button('Save')
    this.editButton = new Button('Edit')

   
    this.initialize = function () {
        this.divleft.render();
        this.saveButton.render(this.divleft);
        this.editButton.render(this.divleft);


    }
}
function divleft() {
  
    this.render = function () {
        
        this.div = document.createElement('div');
        this.div.setAttribute('id', 'divleft');
        this.label = document.createElement('label');
        this.input = document.createElement("input");
        this.input.setAttribute("type", "text");
        this.textarea = document.createElement("textarea");
        this.labelt = document.createElement('label');
        this.labeld=document.createElement('label');
        this.inputd=document.createElement('input');
        this.inputd.setAttribute('type', 'date');
        this.br1=document.createElement('br');
        this.br2=document.createElement('br');
        this.br3=document.createElement('br');
        this.br4=document.createElement('br');

        document.body.appendChild(this.div);
        this.div.appendChild(this.label).appendChild(this.input);
        this.div.appendChild(this.br1);
        this.div.appendChild(this.br2);
        this.div.appendChild(this.labelt).appendChild(this.textarea);
        this.div.appendChild(this.br3);
        this.div.appendChild(this.br4);
        this.div.appendChild(this.labeld).appendChild(this.inputd);
        
        
    }
    
}

function Button(text) {
    this.text = text;

    this.render = function (div) {
        var button = document.createElement("button");
        button.innerText = text;
        debugger;
        div.div.appendChild(button);
    }
}

function Break() {
    this.render = function () {
        var br = document.createElement("br");
        document.body.appendChild(br);
    }
}
new ToDo().initialize();

#divleft{
    width: 190px;
    height:150px;
    Border: 1px solid black;
    padding:10px;
}