为什么更改 textContent 值也会更改 HTML答案

【问题标题】：Why does changing textContent value also changes HTML为什么更改 textContent 值也会更改 HTML
【发布时间】：2023-03-29 05:05:01
【问题描述】：

我在网站中有以下代码，我需要更改“入门”文本

<h4 data-v-318a1596="" class="h4">
  <div data-v-318a1596="">
    <i data-v-318a1596="" class="fa fa-check-square-o" style="color: rgb(141, 153, 166); font-size: 18px; margin-right: 6px;"></i> 
    Getting Started
  </div>
</h4>

正如我所阅读的here，我尝试使用textContent，如下所示；

document.getElementsByClassName('h4')[0].childNodes[0].textContent='My text here'

上面的代码替换了文本，但它也替换了下面的其他 HTML 部分；

<i data-v-318a1596="" class="fa fa-check-square-o" style="color: rgb(141, 153, 166); font-size: 18px; margin-right: 6px;"></i>

所以在运行我的代码后，源代码如下所示；

<h4 data-v-318a1596="" class="h4"><div data-v-318a1596="">My text here</div></h4>

您能帮我只替换文本部分吗？

【问题讨论】：

根据docs：“在节点上设置 textContent 会删除该节点的所有子节点，并将它们替换为具有给定字符串值的单个文本节点。”
为了使用textContent，您需要将“入门”文本包装在一个单独的元素中，例如span

标签： javascript

【解决方案1】：

您可以更改 textNodes，但您必须导航 DOM 才能到达那里

const divToChange = document.querySelector(".h4 > div");
const textNode = divToChange.querySelector("i").nextSibling;
divToChange.replaceChild(document.createTextNode("Finish the job"),textNode)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<h4 data-v-318a1596="" class="h4">
  <div data-v-318a1596="">
    <i data-v-318a1596="" class="fa fa-check-square-o" style="color: rgb(141, 153, 166); font-size: 18px; margin-right: 6px;"></i> 
    Getting Started
  </div>
</h4>

有一个span当然更简单

如果你可以改变它，那么你也可以改变无效的h4

document.querySelector(".h4 &gt; div &gt; span").textContent = "Finish the job"

.h4 span { font-weight:bold }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<div data-v-318a1596="" class="h4">
  <div data-v-318a1596="">
    <i data-v-318a1596="" class="fa fa-check-square-o" style="color: rgb(141, 153, 166); font-size: 18px; margin-right: 6px;"></i> 
    <span>Getting Started</span>
  </div>
</div>

【讨论】：

非常感谢！我不拥有该网站，因此我必须浏览代码。再次感谢日志！