Bonjour,   

je cherche a créer une div enfant par div utilisant une même classe. Et d'y afficher une value a chaque fois différente selon la div parente. Les divs parentes n'ont pas d'ID. 

J'ai essayé de créer avec queryselectorAll ou autre méthode pertiente un tableau et pour chacun des éléments trouvé dans le document, créer la div enfante qui affichera le title de la div (voir ci dessous). J'ai réussi à en créer un sur le #1 mais en boucle avec les éléments title qui change selon la div et à intégrer dans la boucle je n'ai pas encore réussi. 

Voici le code : (code générer par un plugin pour de l'affichage 3D) il y a des dizaines de bloc de cette div mais j'en met que deux pour plus de compréhension.

Donc les class sont mat_option et la valeur que je veux récupérer et title 

document.queryselector(mat_option).title fonctionne bien. Mais ce n'est pas le même title dans chaque div donc il faut afficher le bon à chaque fois dans la boucle.

<div class="mat_option" title="CORTEN EFFECTS" data-mat-title="CORTEN EFFECTS" data-mat-price="" data-mat="dole" data-mat-color="" data-mat-map="https://cyria.net/wp-content/uploads/2022/05/Texture-CORTEN-EFFECTS.jpg" style="background: url(https://cyria.net/wp-content/uploads/2022/05/Texture-CORTEN-EFFECTS-150x150.jpg) no-repeat center; background-size: cover;"></div>

<div class="mat_option active" title="GRIS COSMOS" data-mat-title="GRIS COSMOS" data-mat-price="" data-mat="dole" data-mat-color="" data-mat-map="https://cyria.net/wp-content/uploads/2022/05/Texture-GRIS-COSMOS.jpg" style="background: url(https://cyria.net/wp-content/uploads/2022/05/Texture-GRIS-COSMOS-150x150.jpg) no-repeat center; background-size: cover;"></div>

-
Edité par JulienZuili 11 septembre 2022 à 17:48:58

Bonjour,

Ceci devrait t'aider : https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild

QuerySelector ne set pas à créer un noeud :

La méthode querySelector() de l'interface Document retourne le premier Element dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou null si aucune correspondance n'est trouvée.

https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector

A+

-
Edité par monkey3d 12 septembre 2022 à 12:47:35