web-dev-qa-db-fra.com

Ajouter plusieurs éléments en JavaScript

J'ai la fonction suivante et j'essaie de trouver un meilleur moyen d'ajouter plusieurs éléments en utilisant appendChild().

Lorsque l'utilisateur clique sur Ajouter, chaque élément devrait ressembler à ceci:

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

et j'ai cette fonction pour ajouter ces éléments:

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

Mais vous pouvez remarquer que je répète trois fois la appendChild() pour listItem. Est-il possible d'ajouter plusieurs éléments à la appendChild()?

javascripthtmlappendchild
15
brunodd

Personnellement, je ne vois pas pourquoi vous feriez cela.

Mais si vous devez réellement remplacer toute la appendChild() par une seule instruction, vous pouvez affecter la outerHTML des éléments créés à la innerHTML de l’élément li.

Il vous suffit de remplacer les éléments suivants:

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

Avec ce qui suit:

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

Explication:

L'attribut outerHTML de l'élément DOM interface obtient le fragment HTML sérialisé décrivant l'élément, y compris ses descendants. Ainsi, assigner la outerHTML des éléments créés à la innerHTML de l’élément li revient à l’ajouter.

3
cнŝdk

Vous pouvez le faire avec DocumentFragment . 

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

DocumentFragments permet aux développeurs de placer des éléments enfants sur un fichier parent de type nœud arbitraire, permettant des interactions de type nœud sans un vrai nœud racine. Cela permet aux développeurs de produire structure sans le faire dans le DOM visible

34
Slavik

Vous pouvez utiliser la méthode append en JavaScript.

Ceci est similaire à la méthode append de jQuery mais elle ne supporte pas IE et Edge.

Vous pouvez changer ce code

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

à

listElement.append(listItem,listItemCheckbox,listItemLabel,editButton,deleteButton);
16
Sagar V

Vous devez ajouter plusieurs enfants? Rendez le pluriel avec appendChildren! 

Premières choses d'abord:

HTMLLIElement.prototype.appendChildren = function () {

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

    this.appendChild( arguments[ i ] );

};

Ensuite, pour tout élément de liste:

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

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

Fonctionne avec tous les éléments utilisant la méthode appendChild bien sûr! Comme HTMLDivElement.

2
Atrahasis

Il est possible d'écrire votre propre fonction si vous utilisez l'objet incorporé arguments

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

Ensuite, vous appelez la fonction en tant que telle:

appendMultipleNodes(parent, nodeOne, nodeTwo, nodeThree)
1
Ricardo Pierre-Louis

Fusion des réponses de @Atrahasis et de @Slavik:

Node.prototype.appendChildren = function() {
  let children = [...arguments];

  if (
    children.length == 1 &&
    Object.prototype.toString.call(children[0]) === "[object Array]"
  ) {
    children = children[0];
  }

  const documentFragment = document.createDocumentFragment();
  children.forEach(c => documentFragment.appendChild(c));
  this.appendChild(documentFragment);
};

Ceci accepte les enfants en tant qu'arguments multiples ou en tant qu'argument de tableau unique:

foo.appendChildren(bar1, bar2, bar3);
bar.appendChildren([bar1, bar2, bar3]);
0
Pend

Vous pouvez simplement grouper les éléments dans un seul groupe innerHTML comme ceci:

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

alors appendChild () n'est utilisé qu'une fois.

0
Simon Suh