javascript - 更改外部 div 中的文本时删除了 Span

Question

这个问题已经有答案了:

How can I change an element's text without changing its child elements? (16 个回答)

已关闭 7 年前。

我想要一个文本，其右侧有一个图像(向上或向下箭头)。我使用了这段代码:

<div id="more-time1" class="small-text-size ">more time<span id="arr-icon" class="accordion_down"></span></div>

外部div保存文本，内部span保存图像(图像是类中的数据)。当我更改 div 的文本时:

var moreTime = document.getElementById("more-time1");
moreTime.innerHTML = "less time";

它删除了跨度，并且我无法更改其中的图像，除非我每次都添加一个新跨度。

我的问题是:我是否需要每次都添加跨度，或者我可以有更好的设计，更改文本不会影响跨度？或者也许其他解决方案？

Answer 1

当您设置 div 的 .innerHTML 时，您正在写入其全部内容。这意味着您正在覆盖图像范围。

将文本放入一个跨度中，以便您可以将文本与 div 内的图像分开定位。

<div id="more-time1" class="small-text-size ">
    <span class="more-time1-text">more time</span>
    <span id="arr-icon" class="accordion_down"></span>
</div>

var moreTime = document.getElementById("more-time1-text");
moreTime.innerHTML = "less time";