Bonjour,
Je rencontre un phénomène très bizarre avec une page web HTML/CSS que je modifie à la volée avec du javascript pour refaire un menu en haut de ma page. En gros, au départ, j'ai 2 items du menu qui se sur la gauche de la page, 4 items affichés vers le centre et quelques autres items mis dans une liste déroulante.
A l'arrivée, je veux que tous ces items soient dans le menu du centre. Donc, mon javascript collecte les items des 3 menus, les stocke dans un Array, efface le contenu du innerHTML du <ul> du menu du centre puis fait un appendChild de chaque item collecté dans mon Array.
Je collecte les items via un getElementsByTagName('li') une fois que j'ai choppé l'objet <ul>.
 
Régulièrement (donc, c'est pas systématique,), il se passe un truc étrange : je vois mon menu affiché avec tous mes items et au bout de quelques secondes, les items que j'avais collectés du menu du centre se mettent à disparaitre les uns après les autres : leur zone d'affichage "se réduit" pour disparaitre complètement (comme si leur width passait progressivement de la valeur de base à 0px)    
Si je fais "F5" avec le navigateur (ou ctrl+F5) ça peut le refaire comme pas. Je constate ce pb avec Firefox et Edge. J'ai pas pu tester avec Chrome.
Autre événement déclencheur : avec Firefox, quand je suis sur cette page, si j'affiche les outils du développeur en bas de mon navigateur et que ma barre de menu était correctement affichée, ça fait disparaître les 4 items. Pareil si je ferme les outils du développeur.    
 
Jamais vu un truc pareil. J'arrive pas à comprendre ce qui pourrait être à l'origine de ce comportement, en particulier quand c'est carrément l'affichage/masquage de la zone contenant les outils du développeur en bas de mon navigateur (ça ne redimensionne donc pas en largeur la zone d'affichage de la page de mon navigateur)...
 
Ca vous parle un truc pareil ?
 
Merci.

alors quand tu collectes un item, il est "vivant", et tu collectes sa référence, donc vider le innerHTML du contenu n'est pas du tout la bonne solution car tu vas un peu détruire le bordel.
Au lieu de les collecter, prends les directement et append les dans le noeud que tu veux voir au final et ensutie tu peux nettoyer le reste :

ex :

Et en lisant le reste de ton message, je constate que le site doit avoir un système qui lorsque tu fais un resize de la fenêtre ça trigger une fonction qui va te reconstruire le menu. (enfin je vois ça) et ce genre detruc ça pu déjà du cul

L'outil, c'est Mediawiki, thème Vector.
 
En fait, dans ma première approche, j'avais fait un truc un peu dans ton idée ou je récupérais les <li> du menu de gauche et je faisais un insertBefore() sur le <ul> du menu du centre existant puis je récupérais les <li> du menu de droite et faisais un appendChild() sur le <ul> du centre.
Mais il se produisait la même chose
 
Je crée pas de <ul> pour mon menu car je veux réutiliser celui existant histoire de limiter les changements de html et CSS effectués sur ma page.
 
En creusant cet après-midi, j'ai compris comment mes 4 items disparaissaient : y'a un "truc" qui les transforme en <span> avec un display à none. Mais j'ignore quel bout de code JS est à l'origine de cette transformation C'est pas mon code en tout cas.
 
Du coup, j'ai fait un truc crade : 2 secondes après l'exécution de mon script, je lance une fonction JS qui vérifie si le nb d'items collectés est égal à celui affiché dans mon menu reconstruit. Quand le nb d'items affiché est plus faible (donc, suite au bug), je remplace les 4 <span> par mes 4 items <li>. Ben en faisant ça, tu le crois que ces <li> se prennent un display avec la valeur list-item (alors que mes items ont comme css sur leur <li> un display à inline) ?  
Du coup, ma fonction crade force le display des 4 <li> remis en place avec un display à inline et tout rentre dans l'ordre... sauf si j'affiche les outils du développeur ou les masque. Ma fonction ne se lance qu'une fois (et je vais pas faire un polling toutes les x secondes pour vérifier le nb d'items affichés).
 
C'est quand même très bizarre

 
Pourquoi un polling, alors qu'un window.addEventListener("resize", fn) fera l'affaire.

Je vais tester ça, merci.

Je viens de tester l'événement resize en mettant ma fonction de correction et effectivement, ça marche, c'est bien sur cet événement que mes items disparaissent. Je vais chercher à trouver quel est le bout de code javascript qui est responsable de la modif des <li> en <span> sur cet événement onreisze...

tu briseras les genous de celui qui a fait ça et normalement une nav bien faite tu n'as pas beosin de JS Pour la manipuler, le CSS suffit

En fait, le besoin c'est qu'on veut éviter de passer par un thème dédié et conserver le thème natif (Vector) de Mediawiki mais en l'adaptant légèrement pour harmoniser avec un autre outil qui va faire le lien avec ce Mediawiki. Donc, on pouvait pas modifier le CSS de Vector sinon, à chaque MAJ de version, on allait perdre les modifs.
Donc, dans Mediawiki:MonTheme.js et Mediawiki:MonTheme.css on a mis le nécessaire pour faire les qq MAJ dont on a besoin. Or, dans le thème Vector, la barre de menu de l'article que découpé en 3 parties dans la partie haute et nous, on en voulait qu'une. Voilà pourquoi ce que je dois faire est un peu particulier.
 
Par contre, je ne comprends à quelle logique fonctionnelle répond le fait de transformer des <li> en <span> si c'est pour les masquer ensuite
Si c'était uniquement en réduisant la margeur de l'écran, je me dirais que c'est pour gagner de la place et il enlève des items qu'il juge pas nécessaires (encore que virer l'item permettant de modifier l'article   ). Mais là, non, c'est systématique.

C'est bon, j'ai trouvé d'où venait la disparition des items du thème Vector de Mediawiki :
https://gerrit.wikimedia.org/r/plug [...] bleTabs.js
 
$.collapsibleTabs.handleResize
 
J'ai remplacé par une fonction qui ne fait rien et ça marche