下面的代码通过重写整个文本行来正确更改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更改元素内的文本或标签时,它是否总是重写整个部分?这对于用户可能不可见,但是这总是在幕后发生吗?非常感谢!

最佳答案

更好的方法是将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中。

10-05 20:19
查看更多