web-dev-qa-db-ja.com

getElementsByClassおよびappendChild

私のJavaScriptスキルを磨いて、getElementsByClassが私のコードで機能しない理由を理解しようとしています。コードはかなり単純です。 「clicky」ボタンをクリックすると、スクリプトはdivの子h1要素を作成します。 getElementByIdを使用してdivクラスをIdに変更すると完全に正常に機能しますが、クラスに変更すると機能しません。

GetElementsByClassName、getElementsByClass、getElementsByTagNameを試し、divを適切な属性に変更しましたが、うまくいきませんでした。

<!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>
javascripthtmlcssgetelementbyidappendchild
10
Snorlax

からコードを更新する必要があります

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

に

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

参考のために- https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

作業コード- http://plnkr.co/edit/k8ZnPFKYKScn8iYiZQk0?p=preview

28
Nikhil Aggarwal

IE9 +でサポートされている getElementsByClassName（） を使用できます。

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

しかし、より良い代替案は querySelector（） であり、これはIE8 +でサポートされています

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

querySelector()はCSSセレクター構文を使用するため、クラスの前にドット（。）を配置する必要があります。

スニペット：

_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>_
9
Rick Hitchcock

お気づきのとおり、この関数はgetElementsByNameと呼ばれ、「要素」は複数形です。

listのマークアップを名前で（CSSクラスではなく）返します。

クラス名を処理する関数を使用して、配列の最初の要素を取得するか、探しているものに応じてすべての結果をループする必要があります。

3
Pierre Arlaud