更改外部 div 中的文本时删除跨度 [重复]答案

【问题标题】：Span deleted when change text in external div [duplicate]更改外部 div 中的文本时删除跨度 [重复]
【发布时间】：2015-12-14 09:07:21
【问题描述】：

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

<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";

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

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

【问题讨论】：

标签： javascript html

【解决方案1】：

当您设置 .innerHTML 的 div 时，您正在编写它的全部内容。这意味着您正在覆盖图像跨度。

将您的文本放入一个跨度中，以便您可以将文本与 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";

【讨论】：

谢谢，工作完美且简单

【解决方案2】：

您应该将您的文本包含在一个附加标签内，然后对其进行操作。

HTML：

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

JS：

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

【讨论】：

【解决方案3】：

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

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

解释：在上面的代码 sn-p 中，您访问more-time1 元素（即 textNode）的第一个子节点并修改该节点的值。

更新： 根据下面的评论来更改元素中的文本，您可以在 childNodes 上启动 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';

【讨论】：

这不是一个理想的解决方案。如果将更多元素添加到 div，则此代码可能会中断。
很好的评论，谢谢，答案已更新。