在前端开发中，有时我们需要改变一个包含多个内部标签的 div 元素的文本内容，但是不能影响该元素中已存在的其他标签。这可能是一个具有挑战性的任务，但通过使用一些技巧，可以轻松实现这一目标。
解决方案
首先，我们需要找到要更改文本的 div 元素，并获取其所有子元素。然后，我们可以使用 textContent 属性或 innerText 属性将该元素的文本内容设置为所需的新值。这样做会覆盖原始文本内容，并且不会受到已存在的子元素的影响。
---- ----------- ------------ ------------------- ------
----- ----- - --------------------------------- ----------------- - ---- ------ -- ---- --------------- - ---- ------
在上面的示例中，我们选取了一个 div 元素并设置了它的文本内容为 "New text"，同时保留了该元素中的 p 和 span 标记不受影响。
更好的解决方案
尽管上述方法可以达到将 div 元素的文本内容更改而不影响其内部标签的目的，但它没有考虑到该元素的样式、动画和其他影响元素的因素。在这种情况下，更好的解决方案是使用一个包含文本的 span 元素，并将其插入到 div 元素中适当的位置。
---- ----------- ------------ ----- -------------------------- ------
----- ----- - --------------------------------- ----- ---- - ----------------------------- ---------------- - ---- ------
在上述示例中，我们使用了一个包含文本的 span 元素，并将其插入到 div 元素中。这样一来，就可以使用 JavaScript 更改 span 元素的文本内容，而不会影响该元素中已存在的其他标记。
总结
通过使用上述技巧，您可以轻松地更改 div 元素的文本内容，而不会影响其内部标签。如果您需要保留原始元素的样式和动画效果，则最好使用第二种方法，即将文本放在一个单独的 span 元素中。无论您选择哪种方法，都需要确保您的代码对于所有浏览器都可靠。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30669