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样式。

你可以看到我试图使用＆＃34; crestTitle＆＃34;的CSS ID。申请新的标题，但无论我在CSS表格中放在#crestTitle下的样式，它都不会影响新的标题。

我是否有任何明显的错误？

Answer 1

您是否可以提供包含HTML和CSS的jsfiddle？这对我有用：https://jsfiddle.net/nw35g21x/

CSS：

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

#crestTitle{
  color:red;
}

HTML：

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

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

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

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

1 个答案: