前端开发中，我们经常需要更改网页中的文本内容。通常情况下，我们可以直接修改父元素的 innerHTML 或者 textContent 属性来实现该功能。但是如果父元素包含有多个子元素，这种方式可能会破坏其子元素的结构和样式。
那么有没有一种方法，能够在不改变子元素的情况下更改元素的文本呢？答案是肯定的，下面就为大家介绍两种可行的解决方案。
方案一：使用伪元素
第一种解决方案是使用伪元素 ::before 和 ::after 来插入新的内容。这样做的好处是不会影响原有子元素的样式和结构。
具体实现步骤如下：
- 在 CSS 中定义伪元素，设置 content 属性为要插入的文本。
.element::before {
content: '新内容';
}- 将原有元素的文本内容隐藏掉。
.element {
font-size: 0;
}- 通过设置伪元素的样式来还原原有元素的样式。
.element::before {
font-size: 16px; /* 这里根据实际情况设置 */
}示例代码如下：
<div class="element"> <span>子元素1</span> <span>子元素2</span> </div>
-- -------------------- ---- ------- ---------------- - -------- ------ ---------- ----- ------ ---- - -------- - ---------- -- -
方案二：使用 JavaScript
第二种解决方案是使用 JavaScript 来修改元素的文本。这种方法比较灵活，可以根据实际情况来选择具体的操作方式。
具体实现步骤如下：
- 获取要修改的元素。
const element = document.querySelector('.element');- 获取原有元素的文本内容。
const oldText = element.textContent;
- 修改元素的文本内容。
const newText = '新内容'; element.textContent = newText;
- 将原有文本内容还原到元素中，通过创建一个包含原有文本的 span 元素，并将其插入到元素中。
const oldContent = document.createElement('span');
oldContent.textContent = oldText;
element.appendChild(oldContent);示例代码如下：
<div class="element"> <span>子元素1</span> <span>子元素2</span> </div>
-- -------------------- ---- ------- ----- ------- - ----------------------------------- ----- ------- - -------------------- ----- ------- - ------ ------------------- - -------- ----- ---------- - ------------------------------- ---------------------- - -------- --------------------------------
总结
以上就是两种在不改变子元素的情况下更改元素的文本的解决方案。使用伪元素的方式适合于纯样式上的修改，而使用 JavaScript 的方式则比较灵活，可以根据实际情况来选择具体的操作方式。当然，在实际项目中还需要考虑浏览器兼容性等问题，希望大家在实践中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11473
