title: Append multiple items in JavaScript
body: <p>I have the following function and I am trying to figure out a better way to append multiple items using <code>appendChild()</code>.</p>
  
  <p>When the user clicks on Add, each item should look like this:</p>
  
  <pre><code>&lt;li&gt;
    &lt;input type="checkbox"&gt;
    &lt;label&gt;Content typed by the user&lt;/label&gt;
    &lt;input type="text"&gt;
    &lt;button class="edit"&gt;Edit&lt;/button&gt;
    &lt;button class="delete"&gt;Delete&lt;/button&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>and I have this function to add these elements:</p>
  
  <pre><code>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 &gt; 0) {
      itemText.value = "";
      inputFocus(itemText);
    }
  }
  </code></pre>
  
  <p>But you can notice that I am repeating three times the <code>appendChild()</code> for <code>listItem</code>. Is it possible to add multiple items to the <code>appendChild()</code> ?</p>