Mehrere Elemente in JavaScript anhängen
Ich habe die folgende Funktion und versuche, mithilfe von @ eine bessere Möglichkeit zum Anhängen mehrerer Elemente zu findeappendChild()
.
Wenn der Benutzer auf Hinzufügen klickt, sollte jedes Element folgendermaßen aussehen:
<li>
<input type="checkbox">
<label>Content typed by the user</label>
<input type="text">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</li>
und ich habe diese Funktion, um diese Elemente hinzuzufügen:
function addNewItem(listElement, itemInput) {
var listItem = document.createElement("li");
var listItemCheckbox = document.createElement("input");
var listItemLabel = document.createElement("label");
var editableInput = document.createElement("input");
var editButton = document.createElement("button");
var deleteButton = document.createElement("button");
// define types
listItemCheckbox.type = "checkbox";
editableInput.type = "text";
// define content and class for buttons
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
listItemLabel.innerText = itemText.value;
// appendChild() - append these items to the li
listElement.appendChild(listItem);
listItem.appendChild(listItemCheckbox);
listItem.appendChild(listItemLabel);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
if (itemText.value.length > 0) {
itemText.value = "";
inputFocus(itemText);
}
}
Aber Sie können feststellen, dass ich dreimal das @ wiederhoappendChild()
zumlistItem
. Ist es möglich, dem @ mehrere Elemente hinzuzufügeappendChild()
?