Javascriptで生成されたコンテンツはCSSクラスを無視しますか？

Question

私はJavascriptで生成された単純なメモリゲームに取り組んでいます。その考え方は、それぞれ6つのボタンで4つの行に24のボタンを作成することです。これを行うために、私は次のコードを使用しています：

function shuffle(array) { 
    for (var i = array.length - 1; i > 0; i--) { 
     var j = Math.floor(Math.random() * (i + 1)); 
     var temp = array[i]; 
     array[i] = array[j]; 
     array[j] = temp; 
    } 
    return array; 
} 

var buttons = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]; 

function playGame(){ 
    shuffle(buttons); 

    for(i = 0; i < buttons.length; i++){ 
     document.write("<a href='#' class='btn_Numbers'>" + buttons[i] + "</a>"); 
     if(i == 5 || i == 11 || i == 17 || i == 23){ 
      document.write('<br />'); 
     } 
    } 
} 

を。これは、生成されたハイパーリンクは完全にCSSクラスbtn_Numbersを無視することを除いて、完全に正常に動作します。このようなハイパーリンクを手作業で書くと、完璧に動作します。

これは、コンテンツが存在する前にCSSが読み込まれたために発生したと考えられます。私は数年前にこのようなことが起こったことをぼんやりと覚えています。しかし、私は本当に問題を解決する方法を覚えていない。だから、どんな助けもありがとう！

Answer 1

いいえ、そうではありません。 document.writeを使用すると、ページ上の他のもの（スタイルシートも含む）がすべて削除されるので、CSSが適用されたようには見えませんが、CSSがないため、document.writeを呼び出すとCSSが削除されます。

Answer 2

あなたはdocument.writeをして他のすべてを削除せずに、あなたのHTMLへのリンクを追加するためにこれを使用することができます：

var elm = document.getElementById("someID"); 
var link = document.createNode("a"); 

link.text = "Some text" 
link.setAttribute("class", "btn_Numbers"); 
link.setAttribute("href", "#"); 

elm.appendChild(link) 

上記のコードは、あなたが何かを削除せずに、あなたのページに作成したノードを追加します。