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

Answer 1

Personally, I don't see why you would do this.

But if you really need to replace all the appendChild() with one statement, you can assign the outerHTML of the created elements to the innerHTML of the li element.

You just need to replace the following:

  listElement.appendChild(listItem);
  listItem.appendChild(listItemCheckbox);
  listItem.appendChild(listItemLabel);
  listItem.appendChild(editButton);
  listItem.appendChild(deleteButton);

With the following:

listItem.innerHTML+= listItemCheckbox.outerHTML + listItemLabel.outerHTML + editButton.outerHTML + deleteButton.outerHTML;
listElement.appendChild(listItem);

Explanation:

The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. So assigning the outerHTML of the created elements to the innerHTML of the li element is similar to appending them to it.

Answer 2

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

Answer 3

You need to append several children ? Just make it plural with appendChildren !

First things first :

HTMLLIElement.prototype.appendChildren = function () {

  for ( var i = 0 ; i < arguments.length ; i++ )

    this.appendChild( arguments[ i ] );

};

Then for any list element :

listElement.appendChildren( a, b, c, ... );

//check :
listElement.childNodes;//a, b, c, ...

Works with every element that has the appendChild method of course ! Like HTMLDivElement.

Answer 4

It's possible to write your own function if you use the built in arguments object

function appendMultipleNodes(){
  var args = [].slice.call(arguments);
  for (var x = 1; x < args.length; x++){
      args[0].appendChild(args[x])
  }
  return args[0]
}

Then you would call the function as such:

appendMultipleNodes(parent, nodeOne, nodeTwo, nodeThree)

Answer 5

You could just group the elements into a single innerHTML group like this:

  let node = document.createElement('li');
  node.innerHTML = '<input type="checkbox"><label>Content typed by the user</label>  <input type="text"><button class="edit">Edit</button><button class="delete">Delete</button>';
  document.getElementById('orderedList').appendChild(node);

then appendChild() is only used once.

Answer 6

I would like to add that if you want to add some variability to your html, you can also add variables like this:

let node = document.createElement('div');
node.classList.add("some-class");
node.innerHTML = `<div class="list">
                  <div class="title">${myObject.title}</div>
                  <div class="subtitle">${myObject.subtitle}
                </div>`;