別のdivの後に新しいdivを追加する

Question

divの直後にdtext01のクラスを追加しようとしていますが、動作していません。 ここでは、クラス<div class="dtext01"></div>のようなdivがあります。最終的なコードはこのようになります。<div class="dtext01"></div><div id="rewards">Testing!!!</div>

ここでは、私は成功しなかったコードです。

<script type="text/javascript"> 
var stickyNode = document.createElement("div"); 

stickyNode.innerHTML = 'Testing!!!'; 

stickyNode.id = "rewards"; 
var referenceNode = document.getElementByClass("dtext01"); 
referenceNode.parentNode.insertBefore(stickyNode, referenceNode); 
</script> 

Answer 1

document.getElementByClass()はありません。 document.getElementsByClassName()とquerySelectorAll()は、classNameで要素を取得するために使用できますが、ブラウザ間では標準ではありません。

信頼できるソース（this oneなど）からクロスブラウザgetElementsByClassNameをインポートすることも、自分で書くこともできます。また、選択肢があればクラスの代わりにIDを使用することもできます。

Answer 2

あなたが探している機能はdocument.getElementsByClassName（要素上の複数の点に注意してください）です。 HTMLElement interfaceには最近追加されたものなので、テストしてサポートされていなければフォールバックを提供する必要があります。最初のノードが返された直後に、あなたのdivを追加する

、使用：

var referenceNode; 
if (document.getElementsByClassName) { 
    referenceNode = document.getElementsByClassName("dtext01")[0]; 
} else { 
    // fallback to some other function 
} 

// Make sure you got a node before trying to call methods on it 
if (referenceNode) { 
    referenceNode.parentNode.insertBefore(stickyNode, referenceNode); 
}