Question

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

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

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

Answer 3

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

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

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

<强>更新根据以下评论更改元素中的文字，您可以for循环childNodes：

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中更改文本时删除跨度

3 个答案: