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() ?