Wie können wir mehrere 'div'-Elemente an das vorhandene' div'-Element in JavaScript DOM anhängen?

Question

Ich versuche, zwei Kind anhängen 'DIV Zeilenelemente mit verschiedenen Klassen ein Elternteil ‚div‘ element.Here ist mein Code

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

I Aufgabe anhängen wollen (div), Tasten (div) zu (auch div), das ist child1, child2 sollte an das Elternteil angehängt werden, alle drei sind 'div's.

Wenn ich das tue, es wird geben

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

Aber ich will

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

Wie kann ich es beheben? Kann mir jemand helfen ...

Answer 1

Ändern Sie diese

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

zu

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

^{zum Bearbeiten Variablennamen vorsichtig sein, während Kopie} Einfügen