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()
?
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.
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
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);
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
.
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)
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]);
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.