Question

下面的代码通过重写整行文本正确地更改了HTML元素内的文本。这是使用textContent完成的，但innerHTML也可以这样做。

document.querySelectorAll(".box")[0].textContent = 'The number of dollars in my bank account is $1';

body {
  margin: 0;
  padding: 0;
}
	
.box {
  padding: 10px;
  font-size: 2rem;
  color: white;
  font-family: sans-serif;
  background-color: blue;
}

<div class="box">The number of dollars in my bank account is ?</div>

但是有没有办法只更改文本的一部分而不必重写整行？这可能是不正确的，但像.innerHTML [5,10]这样的东西会改变那些特定目标角色。

简单地说，当Javascript用于更改元素内部的文本或标签时，它是否总是重写整个部分？这可能对用户不可见，但是场景背后总会发生什么？非常感谢！

Answer 1

更好的方法是将HTML更改为

<div class="box">The number of dollars in my bank account is <span id='amount'></span>.</div>

然后，您可以使用js轻松更改金额：

document.getElementById('amount').innerHTML = '5$';

所以你的网站显示：

我的银行帐户中的美元数量为5美元。

如果您想坚持自己的方法，那么只有这样才能将整个内容保存到字符串中，然后通过子字符串，过滤器或正则表达式对其执行一些搜索。然后，您将替换所需的元素，并将字符串放回HTML。

Answer 2

使用嵌套的span标记显示美元金额。然后，您只需更新范围的文本。当你需要整个句子时，你可以访问div.box的textContent。它返回连接的所有嵌套元素的textContent。

是否可以仅编辑元素内部的一部分文本内容或HTML？

2 个答案: