Изменение innerHTMl, сохраняя CSS

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" 

Однако после изменения внутреннегоHTML текст возвращается к его исходным атрибутам. Я бы хотел, чтобы текст сохранял свой цвет (darkgray) и размер шрифта (15 пикселей).

Вот 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>.