Javascript 更改外部div中的文本时删除范围

我想有一个文本和它的右边有一个图像（箭头向上或向下）。 我使用了以下代码：

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

它会删除span，除非每次添加一个新的span，否则我无法更改其中的图像

我的问题是:

---

我是否需要每次添加跨距，或者我可以有一个更好的设计，更改文本不会影响跨距？或者其他解决方案？

当您设置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";

更多的时间
var moreTime=document.getElementById（“more-time1-text”）；
moreTime.innerHTML=“更少的时间”；

您应该将文本环绕在一个附加标记内，然后对其进行操作

HTML:

---

使用下面的代码来丰富所需的结果：

var moreTime = document.getElementById("more-time1");
moreTime.childNodes[0].nodeValue = "Desired text"

解释：在上面的代码片段中，您访问

more-time1

元素（即textNode）的第一个子节点并修改该节点的值

更新： 根据下面的注释更改元素中的文本，您可以开始

for

循环

子节点

：

for (var latestTextNode, i=0; i < moreTime.childNodes.length; i++){
  if (moreTime.childNodes[i].nodeType == 3) {
    moreTime.childNodes[i].nodeValue = '';
    // keep link to latest text node to alter text later
    latestTextNode = moreTime.childNodes[i]; 
  }
};
latestTextNode && latestTextNode.nodeValue = 'Desired text';

for（var latestTextNode，i=0；i

这不是一个理想的解决方案。如果向div添加更多元素，此代码可能会中断。greate注释，谢谢，答案已更新。谢谢，工作完美且简单

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

var moreTime = document.getElementById("more-time1");
moreTime.childNodes[0].nodeValue = "Desired text"

for (var latestTextNode, i=0; i < moreTime.childNodes.length; i++){
  if (moreTime.childNodes[i].nodeType == 3) {
    moreTime.childNodes[i].nodeValue = '';
    // keep link to latest text node to alter text later
    latestTextNode = moreTime.childNodes[i]; 
  }
};
latestTextNode && latestTextNode.nodeValue = 'Desired text';