分配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); 
}