Vor dem letzten untergeordneten Element eines div einfügen

Question

Also im Grunde versuche ich eine Art von Trello zu reproduzieren, und was ich versuche zu tun, ist ein vorhandenes div zu erstellen (oder zu klonen) und es vor der Schaltfläche einzufügen . Ja, ich weiß, es gibt eine Methode namens ".insertBefore()", aber ich habe es tatsächlich versucht, es funktioniert ... Aber auf halbem Wege.

This is how the div should look like

Blocks are disposed in this way, und wie gesagt, was ich versuche zu tun ist, wenn ich auf die Schaltfläche „Schaltfläche Kategorie hinzufügen“ Es klont die div und fügt ihn vor dem Button. Nichts schwierig ich weiß, dass ich weiß. Ich habe es tatsächlich geschafft, aber auf halbem Weg: Es funktioniert. Aber nur einmal.

Ich habe geschaut, was im Inspektor passiert und mir ist aufgefallen, dass jedes Mal, wenn ich auf "Add Category" klicke, das gerade geklonte div durch das div selbst ersetzt wird. Also kann ich es nur einmal hinzufügen, nicht mehr.

Es ist mein Code:

window.onload = function() { 
 
    var board = document.querySelector('#board'); 
 
    var model = document.querySelectorAll('#model'); 
 

 
    //creating the block, didn't use .cloneNode() 
 
    var newTask = document.createElement('div'); 
 
    newTask.className='newTask'; 
 
    newTask.appendChild(document.createElement('p')); 
 
    newTask.querySelector('p').innerHTML = 'New Task'; 
 
    newTask.appendChild(document.createElement('i')); 
 
    newTask.querySelector('i').className = 'fa fa-plus'; 
 
    var newCategory = document.createElement('div'); 
 
    newCategory.className = 'category'; 
 
    newCategory.appendChild(newTask); 
 
    /* Look like this : 
 
    * <div class="category"> 
 
    *  <div class="newTask"> 
 
    *   <p>New Task</p> 
 
    *   <i class="fa fa-plus"> 
 
    *  </div> 
 
    * </div> 
 
    */ 
 

 
    var addCategory = document.querySelector('#addCategory'); 
 
    addCategory.onclick = function() { 
 
     board.insertBefore(newCategory, addCategory); 
 
    }; 
 
};

<div id="board"> 
 
    <div class="category hidden" id="model"> 
 
     <div class="newTask"> 
 
      <p>New task</p> 
 
      <i class="fa fa-plus" aria-hidden="true"></i> 
 
     </div> 
 
    </div> 
 
    <div class="category"> 
 
     <div class="newTask"> 
 
      <p>New task</p> 
 
      <i class="fa fa-plus" aria-hidden="true"></i> 
 
     </div> 
 
     <div class="task"> 
 
      <h3>Task title</h3> 
 
      <p>This is the description of what we have to do</p> 
 
     </div> 
 
    </div> 
 
    <div class="category" id="addCategory"> 
 
     <h3>Add a category</h3> 
 
     <i class="fa fa-plus-circle" aria-hidden="true"></i>    
 
    </div> 
 
</div>

Also das ist, was passiert: https://i.neilrichter.com/c7kd3.gif (File zu groß sorry)

Wie würden Sie dieses Problem lösen? Ich habe vergessen, es zu erwähnen, aber ich darf nicht jQuery verwenden ...

Answer 1

Sie erstellen nur das div einmal (wenn das Fenster lädt) und dann das gleiche Div jedes Mal einfügen, wenn der onclick-Handler ausgeführt wird.

Sie benötigen ein neues div jedesmal, wenn die Onclick-Handler läuft zu erstellen:

window.onload = function() { 
 
    var board = document.querySelector('#board'); 
 
    var model = document.querySelectorAll('#model'); 
 

 
    var addCategory = document.querySelector('#addCategory'); 
 
    addCategory.onclick = function() { 
 
     var newTask = document.createElement('div'); 
 
     newTask.className='newTask'; 
 
     newTask.appendChild(document.createElement('p')); 
 
     newTask.querySelector('p').innerHTML = 'New Task'; 
 
     newTask.appendChild(document.createElement('i')); 
 
     newTask.querySelector('i').className = 'fa fa-plus'; 
 
     var newCategory = document.createElement('div'); 
 
     newCategory.className = 'category'; 
 
     newCategory.appendChild(newTask); 
 

 
     board.insertBefore(newCategory, addCategory); 
 
    }; 
 
};

<div id="board"> 
 
    <div class="category hidden" id="model"> 
 
     <div class="newTask"> 
 
      <p>New task</p> 
 
      <i class="fa fa-plus" aria-hidden="true"></i> 
 
     </div> 
 
    </div> 
 
    <div class="category"> 
 
     <div class="newTask"> 
 
      <p>New task</p> 
 
      <i class="fa fa-plus" aria-hidden="true"></i> 
 
     </div> 
 
     <div class="task"> 
 
      <h3>Task title</h3> 
 
      <p>This is the description of what we have to do</p> 
 
     </div> 
 
    </div> 
 
    <div class="category" id="addCategory"> 
 
     <h3>Add a category</h3> 
 
     <i class="fa fa-plus-circle" aria-hidden="true"></i>    
 
    </div> 
 
</div>