将CSS ID分配给Javascript创建的元素_Javascript_Html_Css

将CSS ID分配给Javascript创建的元素

javascript html css

将CSS ID分配给Javascript创建的元素,javascript,html,css,Javascript,Html,Css,因此，我尝试为HTML页面创建动态内容，使用JavaScript根据单击事件创建元素，这将受到预先存在的CSS样式的影响但我似乎无法将新元素与它的CSS ID挂钩 crestDiv.onclick = function() { //Remove the Elements on Screen var element = document.getElementById("crestDiv"); element.parentNode.removeChild(element);

因此，我尝试为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样式上

你可以看到我正在尝试使用CSS ID“crestTitle”来应用于新标题，但无论我在CSS表中的#crestTitle下添加了什么样式，它都不会影响新标题

我是否犯了任何明显的错误？

您能否提供一个包含HTML和CSS的示例？这对我很有用：

CSS:

HTML:

你能提供一个包含HTML和CSS的文档吗？这对我很有用：

CSS:

HTML:

您应该使用css类。i、 e.

.crestTitle

和

标题.classList.add（“crestTitle”）什么是CSS？您是否最终拥有多个具有相同id的项目？基本HTML，这样我们就可以运行它了？将HTML代码添加到问题添加JSFIDLE示例中，使用css代码，但实际上看不到css，这很难说。您应该使用css类。i、 e..crestTitle
和标题.classList.add（“crestTitle”）什么是CSS？您是否最终拥有多个具有相同id的项目？基本的HTML，这样我们就可以运行它了？将您的HTML代码添加到问题添加JSFIDLE示例中，使用css代码，但实际上看不到您的css，这很难说。由于缺少本地保存的图像等原因，我不确定JSFIDLE的效果如何。但现在，样式应用于元素。但是您需要将CSS属性从“font-color”更改为“color”。由于缺少本地保存的图像等原因，我不确定JSFIDLE的效果如何。但是现在，样式应用于元素。但是您需要将CSS属性从“字体颜色”更改为“颜色”
#crestDiv{
  width:100%;
  min-height:100px;
  background-color:cyan;
}

#crestTitle{
  color:red;
}

<body>
<div id="contentDiv">
<div id="crestDiv">

</div>
</div>
</body>

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