Javascript 如何显示正方形的值'；仅当鼠标悬停在其上时，其id为？

我不允许在此作业中使用任何html。以下是迄今为止我在javascript中的内容：

document.addEventListener("DOMContentLoaded", function () {

    let button = document.createElement('button');
    let btnText = document.createTextNode('Add Square');
    button.appendChild(btnText);
    document.body.appendChild(button);

    let sqContainer = document.createElement('div');
    sqContainer.classList.add('container')
    document.body.appendChild(sqContainer)

    let num = 0

    button.addEventListener("click", function () {
        let square = document.createElement('div')
        square.classList.add('square')
        sqContainer.appendChild(square)
        document.body.appendChild(sqContainer)
        num++
        square.setAttribute('id', num)

        let idDisplay = document.createElement('span')
        idDisplay.classList.add('id-display')
        idDisplay.innerText = num
     })
})

这将创建横穿屏幕的框，直到它们到达页面的末尾，然后将它们环绕在我使用flex box归档的页面上。这是我的css：

.container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    margin-right: 10px;
    margin-top: 10px;
    background-color: purple;
}

.square:hover {
   display: num;
}

下面是逐字说明：当鼠标悬停在正方形上时，正方形id的值应显示在正方形的中心，当光标不再位于正方形上时消失

您可以使用包含

id的。默认情况下，将其设置为
opacity:0
，然后在正方形悬停时更改其不透明度


document.addEventListener（“DOMContentLoaded”，（）=>{
const button=document.createElement（'button'）；
const sqContainer=document.createElement（'div'）；
button.innerText=“添加正方形”；
sqContainer.classList.add（'container'）；
document.body.appendChild（按钮）；
document.body.appendChild（sqContainer）；
设num=0
按钮。addEventListener（“单击”，（）=>{
num++
const square=document.createElement（'div'）
square.classList.add（'square'）
sqContainer.appendChild（方形）
square.setAttribute（'id'，num）
})
})
.container{
显示器：flex；
柔性包装：包装；
}
.广场{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100px；
宽度：100px；
右边距：10px；
边缘顶部：10px；
背景颜色：紫色；
位置：相对位置；
}
.方：以前{
内容：attr（id）；
不透明度：0；
过渡：不透明度。25秒缓解；
}
.square:悬停：在{
不透明度：1
}