分配CSS ID到Javascript創建元素

Question

所以我試圖創建一個HTML頁面的動態內容，使用JavaScript創建基於點擊事件的元素，這將受到現有CSS樣式的影響。

但我似乎無法將新元素掛接到它的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表格中的#crestTitle的樣式如何，它都不會影響新的標題。

我在做任何明顯的錯誤嗎？

Answer 1

你能提供一個jsfiddle包括你的HTML和CSS嗎？ 這個工作對我來說：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); 
}