替换 .innerText 移动 div 位置

【问题标题】：replacing .innerText moves div position替换 .innerText 移动 div 位置
【发布时间】：2021-12-29 00:25:31
【问题描述】：

当函数changeText()被调用时，div位置由于某种原因向下移动

JS：

function changeText() {
    document.getElementById("div1").innerText = "string"
}

HTML：

<div id="div1" onmouseover="changeText()">
    <p>div 1</p>
</div>

【问题讨论】：

【解决方案1】：

您正在用文本替换 div 的所有内容。所以你正在删除段落元素。如果您替换段落元素的内容，它不会移动，因为该元素仍然存在。

function changeText() {
    document.querySelector("#div1 p").innerText = "string"
}

<div id="div1" onmouseover="changeText()">
    <p>div 1</p>
</div>

【讨论】：