Javascript Girl
  1. Javascript Girl
  3. GetElementsByClass et appendChild
Intereting Posts
Refresh Image PHP et Javascript Comment utiliser redis PUBLIEZ / ABONNEZ-VOUS avec nodejs pour avertir les clients lorsque les valeurs de données changent? Faites quelque chose javascript avant asp.net anypostback Les requêtes XPath dans IE utilisent des index basés sur zéro, mais la spécification W3C est basée sur un seul. Comment puis-je gérer la différence? Pourquoi `null> = 0 && null <= 0` mais pas` null == 0`? Node JS, structures de données traditionnelles? (Comme Set, etc.), tout comme Java.util pour le nœud? Calculez la différence entre 2 timestamps en utilisant javascript Meilleur moyen de générer un tableau 2D vide Express.js redirige vers HTTPS et envoie index.html Angular 2 pipe qui transforme l'objet JSON en imprimé JSON jolie Appeler la fonction javascript à partir d'un select onChange Comment puis-je utiliser les gestionnaires d'événements entre les fichiers de module JavaScript avec Node.js? Menu SideBar d'accordéon utilisant des composants Nav avec reac-bootstrap Comment faire une barre de progression Le sélecteur jQuery pour vérifier si un élément est animé à caché

GetElementsByClass et appendChild

Je fais juste un brossage sur mes compétences en javascript et je tente de comprendre pourquoi getElementsByClass ne fonctionne pas pour mon code. Le code est assez simple. En cliquant sur un bouton "clicky", le script créera un élément enfant h1 de div. Il fonctionne parfaitement bien lorsque j'utilise getElementById et change la classe div à Id mais ne fonctionne pas lorsque je la change en classe.

J'ai essayé, getElementsByClassName, getElementsByClass, getElementsByTagName et changez le div à l'attribut approprié, mais pas de chance. 

<!doctype html> <html> <body> <p>Click on button to see how appendChild works</p> <button onclick="myFunction()">Clicky </button> <script> function myFunction(){ var first = document.createElement("H1"); var text = document.createTextNode("Jason is pretty awesome"); first.appendChild(text); document.getElementsByName("thistime").appendChild(first); } </script> <div class="thistime">Hi</div> </body> </html>

Vous devez mettre à jour votre code de 

 document.getElementsByName("thistime").appendChild(first);

à 

 document.getElementsByClassName("thistime")[0].appendChild(first);

Pour référence – https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Code de travail – http://plnkr.co/edit/k8ZnPFKYKScn8iYiZQk0?p=preview

Vous pouvez utiliser getElementsByClassName () , qui est pris en charge dans IE9 +: 

  document.getElementsByClassName("thistime")[0].appendChild(first);

Mais une meilleure alternative peut être querySelector () , qui est pris en charge dans IE8 + 

  document.querySelector(".thistime").appendChild(first);

Notez que querySelector() utilise la syntaxe du sélecteur CSS, vous devez donc placer un point (.) Avant la classe.

Fragment: 

 function myFunction() { var first = document.createElement("H1"); var text = document.createTextNode("Jason is pretty awesome"); first.appendChild(text); document.querySelector(".thistime").appendChild(first); } 
 <p>Click on button to see how appendChild works</p> <button onclick="myFunction()">Clicky</button> <div class="thistime">Hi</div>

Comme vous l'avez remarqué, la fonction s'appelle getElementsByName avec "éléments" en pluriel.

Il renvoie une liste de marges par leur nom (et non leur classe css).

Vous devez utiliser la fonction qui gère le nom de la classe, et obtenir le premier élément du tableau, ou faire une boucle sur tous les résultats, selon ce que vous recherchez.