Créer un nouvel élément en javascript et essayé la méthode appendChild pour l'adapter ... n'a pas fonctionné. Ce qui donne?

Question

les gars. J'ai créé un nouveau menu déroulant dans mon site Web fictif que j'ai créé. Tout va bien sauf SAUF un exercice que je fais avec vanilla Javascript. Ce que je veux faire est de créer un élément li et ensuite je fais la même chose mais créer un nouvel élément, l'ancre pour les liens. Voici ce que j'ai jusqu'à présent,

var li = document.createElement('li'); 

fait la même chose pour l'élément d'ancrage.

var a = document.createElement('a'); 

maintenant je crée une variable parente comme ceci.

var parent = document.getElementById('ul-li-a').getElementsByTagName('li'); 

maintenant j'ai un tableau de li qui sont listés comme ça.

[li, li, li, li, li, li, li, li, li, li, li, li] 

Voici où les choses deviennent vaines pour moi. J'ai alors essayé la méthode append append comme si ...

parent.appendChild(li); 

seulement pour obtenir cette erreur bs qui a déclaré exactement cela. Qu'est-ce que je manque exactement de tout ce que j'ai besoin de comprendre et de mettre en œuvre?

Merci d'avance, tout le monde. :)

Answer 1

La variable parent est dans ce cas un HTMLCollection. C'est pourquoi la fonction appendChild n'est pas définie. Vous devez appliquer la fonction appendChild à chaque élément de ce type de données. Vous pouvez utiliser cet extrait (ES2015) d'abord le convertir en un tableau, puis utiliser forEach pour appliquer la fonction à tous les éléments:

[...parent].forEach(x => x.appendChild(li)); 

ou vous pouvez simplement itérer sur la HTMLCollection (Javascript oldschool):

for (var i = 0; i < parent.length; i++) { 
    parent[i].appendChild(li); 
}