在保持CSS的同时改变innerHTMl

Question

我在div中有一个段落：

HTML：

<div id="header"><p>Header</p></div>

CSS：

#header p {
color: darkgray;
font-size: 15px;

单击按钮时，innerHTML更改：

使用Javascript：

var header = document.getElementById('header')
header.innerHTML = "Changed"

但是，更改after innerHTML后，文本将返回其原始属性。我希望文本保持其颜色（darkgray）和字体大小（15px）。

这是JS Fiddle

Answer 1

它不起作用，因为您随后删除了嵌套的p元素（这是应用CSS的原因）。

您可以选择第一个子节点，然后更改textContent property：

Updated Example

var header = document.getElementById('header');
header.childNodes[0].textContent = "Changed";

访问childNodes属性的好处是它将选择子元素或文本节点。这意味着即使#header元素不包含后代p元素，也会更改文本。

换句话说，它会替换<div id="header"><p>Header</p></div>和<div id="header">Header</div>中的文字。