I’m currently trying to append new element into existing container, but for some reason, it does manage to show when I console.log()
but the output wasn’t reflect to the DOM element. The code is available here.
export default function App() {
var count = document.getElementsByClassName("numbering");
var numbers = [];
for (var i = 0; i < count.length; i++) {
numbers.push(i + 1);
}
if (count.length > 0 && count !== "" && count !== undefined) {
numbers.forEach((element) => {
var newChild = document.createElement("div");
newChild.className = "number-" + element;
newChild.innerHTML = element;
count[element - 1].appendChild(newChild);
//does log the output
console.log(count[element - 1]);
});
}
const Container = (props) => {
return <div className="numbering">{props.children}</div>;
};
return (
<div className="App">
<Container>
<div>Content 1</div>
</Container>
<Container>
<div>Content 2</div>
</Container>
</div>
);
}
Expectation:
Have a counter that counts how many .numbering
class are appeared in element. Then based on the length, display the number accordingly.
Problem:
It doesn’t render as what I expected, but when I console.log()
it, it does show.
Question:
May I know where I’ve done wrongly here? Or is there any alternative way to achieve what I’m trying to do here?