时间戳

首页 > 解决方案 > 为什么更改 textContent 值也会更改 HTML

javascript - 为什么更改 textContent 值也会更改 HTML

问题描述

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

<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>

正如我在这里所读到的，我尝试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>

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

标签： javascript

解决方案

您可以更改 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>

当然有跨度更简单

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

document.querySelector(".h4 > div > 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>

推荐阅读