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

Question

So I'm making my stopwatch for Rubik's cube. I have a div element (records) that should display the time which I want to enter when a button is clicked, but I can't append a p element to this div , and neither can I apply any CSS to it.

in rubik.js:

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

When I append a child paragraph to this div it becomes a text element. the div element in CSS:

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

The two buttons(the add current time and the remove last time buttons) have a position of fixed

Thanks for your time.

Answer 1

The Node.appendChild() method returns the appended node or text node. So this document.createElement("p").appendChild(document.createTextNode( ${formula.first}.${formula.second}.${formula.third} )) returns the append text node, and not the p element.

Create the p element, assign it to variable, then append the text node, and append the p element to #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);

 <div id="records"></div>