CSS IDをJavascriptの作成要素に割り当てる

Question

JavaScriptを使用して、既存のCSSスタイルの影響を受けるクリックイベントに基づいて要素を作成するHTMLページの動的コンテンツを作成しようとしています。

しかし、新しい要素をCSS IDにフックすることはできません。コンテンツのすべての残りの部分が消えた後、それが動作

crestDiv.onclick = function() 
{ 
    //Remove the Elements on Screen 
    var element = document.getElementById("crestDiv"); 
    element.parentNode.removeChild(element); 
    element = document.getElementById("breakDiv"); 
    element.parentNode.removeChild(element); 
    element = document.getElementById("buildDiv"); 
    element.parentNode.removeChild(element); 
    element = document.getElementById("surgeDiv"); 
    element.parentNode.removeChild(element); 
    element = document.getElementById("wavesIcon"); 
    element.parentNode.removeChild(element); 

    //Add the Elements to Screen 

    //Create Heading 
    var heading = document.createElement("h1"); 
    heading.id = "crestTitle"; 
    var node = document.createTextNode("Crest Heading"); 
    heading.appendChild(node); 

    //Attach Heading to existing Element 
    element = document.getElementById("contentDiv"); 
    element.appendChild(heading); 
} 

は、見出しが画面に表示されますが、それはそれで何のCSSスタイルを持っていません。

私は、新しい見出しに適用するには "crestTitle"のCSS IDを使用しようとしていますが、CSSシートに#cr​​estTitleの下に置いたスタイルに関係なく、新しい見出しには影響しません。

私は間違いがありますか？

Answer 1

あなたのHTMLとCSSも含めてjsfiddleを提供できますか？ これは私の作品：https://jsfiddle.net/nw35g21x/

CSS：

#crestDiv{ 
    width:100%; 
    min-height:100px; 
    background-color:cyan; 
} 

#crestTitle{ 
    color:red; 
} 

HTML：

​​

はJavaScript：

var crestDiv = document.getElementById("crestDiv"); 
crestDiv.onclick = function() 
{ 
    //Remove the Elements on Screen 
    var element = document.getElementById("crestDiv"); 

    //Add the Elements to Screen 

    //Create Heading 
    var heading = document.createElement("h1"); 
    heading.id = "crestTitle"; 
    var node = document.createTextNode("Crest Heading"); 
    heading.appendChild(node); 

    //Attach Heading to existing Element 
    element = document.getElementById("contentDiv"); 
    element.appendChild(heading); 
}