web-dev-qa-db-fra.com

getElementsByClass et appendChild

juste pour améliorer mes compétences en javascript et essayer 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 h1 enfant de div. Cela fonctionne parfaitement lorsque j'utilise getElementById et que je change la classe div en Id, mais que cela ne fonctionne pas lorsque je le change en classe.

J'ai essayé, getElementsByClassName, getElementsByClass, getElementsByTagName et le changement de div pour 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>
javascripthtml5css3getelementbyidappendchild
7
Snorlax

Vous devez mettre à jour votre code à partir 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

21
Nikhil Aggarwal

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 supporté dans IE8 +

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

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

Snippet: 

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>

5
Rick Hitchcock

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

Il retourne une liste des balises 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 une boucle sur tous les résultats, en fonction de ce que vous recherchez.

2
Pierre Arlaud