Erstellen Sie ein Element und hängen Sie ein zweites Element daran an, bevor Sie es an das Dokument anhängen

Question

Ich versuche ein Element zu erstellen und dann ein anderes Element an das Element anzuhängen, bevor es an das Dokument übergeben wird. Ich bin mir nicht sicher, warum mein Code nicht funktioniert, habe verschiedene Methoden getestet.

var count = 0; 
 
\t function addElement() { 
 

 
\t \t count++; 
 

 
\t \t // Create plan element 
 
\t \t var newElement = document.createElement("li"); 
 
\t \t newElement.classList.add("collection-item"); 
 

 
\t \t var main = document.createElement("div"); 
 
\t \t var side = document.createElement("a"); 
 
\t \t side.classList.add("secondary-content"); 
 
\t \t main.appendChild(side); 
 
\t \t newElement.appendChild(main); 
 

 
\t \t // append element to plan layout 
 
\t \t planDesign.appendChild(newElement); 
 

 
\t \t // get values 
 
\t \t var exercise = newExcersise.value; 
 
\t \t var set = newSet.value; 
 
\t \t var rep = newRep.value; 
 
\t \t main.innerHTML = "<span>" + count + ".</span>" + exercise; 
 
\t \t side.innerHTML = "<span>Sets: </span>" + set + " <span>Reps: </span>" + rep; 
 
\t }

Ich brauche das erstellt "ein" Element, um in den "div" eingefügt werden.

Answer 1

Sie verwenden zwei verschiedene Techniken, um das Gleiche zu erreichen und es verursacht Sie Ihr main Element Inhalt zu überschreiben, wenn Sie sagen:

main.innerHTML = "<span>" + count + ".</span>" + exercise; 

nach erfolgreicher side Element in main anhängt.

Seien Sie konsistent, wenn Sie können. Sie verwenden document.createElement(), element.innerHTML und element.appendChild() - verschiedene Möglichkeiten, das Gleiche zu tun.

Wenn Sie den Code so ändern, dass Sie die DOM-API zum Erstellen neuer Knoten verwenden (im Gegensatz zum Erstellen von HTML aus verketteten Zeichenfolgen), können Sie die Konfiguration Ihrer Elemente und deren Bereiche besser steuern.

var spn = document.createElement("span"); 
spn.textContent = count + "."; 
main.appendChild(spn); 

var text = document.createTextNode(exercise); 
main.appendChild(text);