为什么我不能对这个元素应用任何东西？

Question

因此，我正在为Rubik的立方体制作秒表。我有一个div元素（记录），该元素应显示单击按钮时我想输入的时间，但是我无法在此p上附加一个div元素，并且我也不能应用任何CSS对此。

在rubik.js中：

document.getElementById("records").appendChild(document.createElement("p").appendChild(document.createTextNode(`${formula.first}.${formula.second}.${formula.third}`)));

当我在此div上添加一个子段落时，它将成为text元素。CSS中的div元素：

#records {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100% - 620px);
    height: 130px;
    border-top: 2px solid black;
    background-color: white !important;
    overflow-y: scroll;
}

这两个按钮（添加当前时间和删除上次时间按钮）的position为fixed

感谢您的时间。

Answer 1

Node.appendChild()方法返回附加的节点或文本节点。因此，此Node.appendChild() $ {formula.first}。$ {formula.second}。$ {formula.third} document.createElement("p").appendChild(document.createTextNode(返回附加文本节点，而不是))元素。

创建p元素，将其分配给变量，然后附加文本节点，然后将p元素附加到p：

#records

const formula = { first: '1', second: '2', third: '3' };

const p = document.createElement("p")

p.appendChild(document.createTextNode(`${formula.first}.${formula.second}.${formula.third}`))

document.getElementById("records").appendChild(p);