Append multiple items in JavaScript

Question

I have the following function and I am trying to figure out a better way to append multiple items using appendChild().

When the user clicks on Add, each item should look like this:

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

and I have this function to add these elements:

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

But you can notice that I am repeating three times the appendChild() for listItem. Is it possible to add multiple items to the appendChild() ?

Answer 1

You can do it with DocumentFragment.

var documentFragment = document.createDocumentFragment(); documentFragment.appendChild(listItem); listItem.appendChild(listItemCheckbox); listItem.appendChild(listItemLabel); listItem.appendChild(editButton); listItem.appendChild(deleteButton); listElement.appendChild(documentFragment); 

DocumentFragments allow developers to place child elements onto an arbitrary node-like parent, allowing for node-like interactions without a true root node. Doing so allows developers to produce structure without doing so within the visible DOM