更新 innerText 而不删除子节点答案

【问题标题】：update innerText without deleting child nodes更新 innerText 而不删除子节点
【发布时间】：2017-12-13 16:34:26
【问题描述】：

我有一个带有一些文本的 div 和一个子 div。我想更新外部 div 文本并保留子 div。

<div class="outer">
  some text here
<div class="arrow-down"></div>
</div>

如果我尝试outer.innerText = "foo"，向下箭头元素将被删除。我该如何解决这个问题？

谢谢

【问题讨论】：

【解决方案1】：

创建一个子元素，例如 span 元素，然后将要更改的文本放入其中。

然后你可以像这样通过 JavaScript 更新它：

var el = document.getElementById('inner');
el.innerText = 'some different text';

<div class="outer">
  <span id="inner">some text here</span>
  <div class="arrow-down"></div>
</div>

【讨论】：

谢谢，我会这样做，因为它似乎是唯一的选择
这不一定是唯一的选择。例如，您还可以从 div 的 innerHTML 属性中解析 HTML 并使用正则表达式换入新文本……但这会更困难且不够灵活。使用额外的跨度来划分你的文本总是更好，因为它为你提供了更多的选择，例如跨度和它的兄弟标签之间的独特样式。
这可能会回答你的问题...stackoverflow.com/a/4106910/1108235