Modifying inner content without altering CSS styling

Question

Modifying inner content without altering CSS styling

Inside this div, there is a paragraph:

This is the HTML code:

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

This is the CSS code:

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

Whenever a button is clicked, the innerHTML gets updated:

Here is the Javascript code:

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

But once the innerHTML is changed, the text goes back to its original style. My goal is for the text to maintain its color (darkgray) and font size (15px).

You can check out the JS Fiddle here.

javascript html css innerhtml

Answer 1

Answer №1

The issue lies in the fact that you are removing the nested p element which has the CSS styling applied to it.

To resolve this, you can target the first child node and then update the textContent property:

See Updated Example

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

By using the childNodes property, you can target either a child element or a text node. This ensures that the text content will be updated even if there is no descendant p element within the #header element.

In essence, this approach will modify the text content within both

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

and

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

.

Answer 2

The issue lies in the fact that you are removing the nested p element which has the CSS styling applied to it.

To resolve this, you can target the first child node and then update the textContent property:

See Updated Example

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

By using the childNodes property, you can target either a child element or a text node. This ensures that the text content will be updated even if there is no descendant p element within the #header element.

In essence, this approach will modify the text content within both

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

and

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

.

Modifying inner content without altering CSS styling

Answer №1

Similar questions

The file field appears to be empty when sending a multipart/form-data request via AJAX

Creating HTML content in a new window with Vue.js - a step by step guide

Navigate to the top of the Vue scrollable list using v-auto-complete

Troubleshooting Event Tracking Problems with Brave Browser on PostHog

Looking for a way to implement a vertical autoscroll <ul> list that responds to mouse movement using JavaScript and jQuery

Interactive bar chart that updates in real-time using a combination of javascript, html, and

Prevent the need to go through the keycloak callback process each time the page is

javascript for each and every textarea

The functionality of ng-click and ng-submit seems to be malfunctioning

What is the method used to incorporate the radial gradient in this design?

Update all Vue component imports to include the .vue extension at the end

What is the best way to center a Div element without it scrolling?

Pass the ID of the <a> element from one function to another

Arranging date and time in jQuery based on AM/PM notation

Dynamic HTML text colors that change rapidly

What could be causing my navbar to not be responsive on mobile devices?

I desire a three-column layout where the middle column will expand in width if columns 1 and 3 are vacant

ES6 throwing an error: SyntaxError due to an unexpected token ")"

Tips on utilizing the b-pagination API?

Ways to retrieve Data obtained in response using superagent