更改 div 文本布局整个文档答案

【问题标题】：Changing div text layouts the whole document更改 div 文本布局整个文档
【发布时间】：2016-03-04 07:05:54
【问题描述】：

我想用 javascript 更改 div 内的文本（jQuery 也可以）。
有几个可以做到这一点：

element.innerText  
element.innerHTML  
element.textContent  
$(element).text()  
$(element).html()

但是当我使用上述方法时，整个文档都会受到影响，而不仅仅是div。
请参阅下面的 chrome 时间线，它指的是这个 fiddle

有没有办法在不影响整个文档的情况下更新 div 内的文本？

【问题讨论】：

您能否向我们展示导致此错误的 HTML 和 JavaScript 代码，而不仅仅是屏幕截图？也许更新您链接的fiddle 并附上重新创建错误的示例，因为声明$("#3").html(timestamp); 是正确的并且应该可以正常工作，所以我怀疑错误来自其他地方。
@NickZ - 问题中有一个小提琴链接有效。问题在于效率，而不是工作代码。
你的小提琴没有适合我的 javascript。
@MrBurger - 已修复。请重试。
范围始终是整个文档，因为 JQuery 要 find 您引用的元素，它必须检查整个文档去寻找它。即使您试图通过仅在某个容器内检查来最小化其范围，也必须检查整个文档以找到该容器。我认为如果没有整个文档的范围，就不可能更新一个值。另外，您说“有没有办法在不影响整个文档的情况下更新 div 内的文本？”但是它并没有影响整个文档，它只是指它的范围。

【解决方案1】：

因为更新文本会影响元素的宽度/高度和页面的流动，所以每当 DOM 发生变化时，通常必须重新布置整个文档。但是，您可以做一些事情，因此只需要重新布置文档的一部分。

要成为布局边界，元素必须：

成为 SVG 根 (<svg>)。

成为文本或搜索<input> 字段。

或：

不能显示内联或内联块

没有百分比高度值。

没有隐式或自动高度值。

没有隐式或自动宽度值。

具有明确的溢出值（滚动、自动或隐藏）。

不是表格元素的后代。

如果您要更新布局边界的元素，则只需更新元素内的文档部分。但是，请记住，这是在谈论不到一毫秒的优化，而未成熟的优化是 generally considered bad practice.

【讨论】：

【解决方案2】：

注意：不要以数字开头的 id 属性。这可能会导致某些浏览器出现问题。

【讨论】：