JavaScript setting innerHTML CSS does not work

In front-end development, we often use JavaScript to dynamically modify page content. A common operation is using the innerHTML property to change an element’s content. However, sometimes, we find that setting innerHTML doesn’t take effect on the element’s style, which can be confusing. This article will detail why CSS styles don’t take effect when setting innerHTML in JavaScript, and provide solutions.

Problem Analysis

When using the innerHTML property to set element content, if the element contains style information, such as inline styles or external style sheets, setting innerHTML may cause the style to become ineffective. This is because innerHTML replaces the element’s content with new HTML code, without preserving the existing style information. As a result, setting innerHTML overwrites the existing style, causing the style to not take effect.

Solution

To solve this problem, we can use the following methods:

Method 1: Use the `insertAdjacentHTML` method

The insertAdjacentHTML method inserts HTML code at a specified location without affecting the existing style information. First, create a new element and then use the insertAdjacentHTML method to insert the new HTML code at the specified location.

const element = document.getElementById('example'); 
element.insertAdjacentHTML('beforeend', '<div style="color: red;">Hello, geek-docs.com!</div>');

Method 2: Using the `createElement` and `appendChild` methods

Another method is to create a new element first and then use the appendChild method to append the new element to the specified location. This method preserves the original style information.

const element = document.getElementById('example'); 
const newElement = document.createElement('div'); 
newElement.textContent = 'Hello, geek-docs.com!'; 
newElement.style.color = 'red'; 
element.appendChild(newElement);

Method 3: Use the `innerText` property instead of `innerHTML`

If we only need to set the text content of an element without inserting HTML code, we can use the innerText property instead of innerHTML to avoid the style failure issue.

const element = document.getElementById('example'); 
element.innerText = 'Hello, geek-docs.com!';

Method 4: Use the `textContent` property instead of `innerHTML`

Similar to the innerText property, the textContent property can also be used to set the text content of an element without affecting its style information.

const element = document.getElementById('example'); 
element.textContent = 'Hello, geek-docs.com!';

Example Code

Here is some example code that demonstrates how to use the above method to set element content and preserve style information:

Example 1: Using the `insertAdjacentHTML` method

<div id="example"></div> 
<script> 
const element = document.getElementById('example'); 
element.insertAdjacentHTML('beforeend', '<div style="color: red;">Hello, geek-docs.com!</div>'); 
</script>

Result: The red text “Hello, geek-docs.com!” is displayed on the page.

Example 2: Using the `createElement` and `appendChild` methods

<div id="example"></div> 
<script> 
const element = document.getElementById('example'); 
const newElement = document.createElement('div'); 
newElement.textContent = 'Hello, geek-docs.com!'; 
newElement.style.color = 'red'; 
element.appendChild(newElement); 
</script>

Result: The red text “Hello, geek-docs.com!” is displayed on the page.

Example 3: Using the `innerText` property instead of `innerHTML`

<div id="example"></div> 
<script> 
const element = document.getElementById('example'); 
element.innerText = 'Hello, geek-docs.com!'; 
</script>

Result: The text “Hello, geek-docs.com!” is displayed on the page.

Example 4: Using the `textContent` attribute instead of `innerHTML`

<div id="example"></div> 
<script> 
const element = document.getElementById('example'); 
element.textContent = 'Hello, geek-docs.com!'; 
</script>

Result: The text “Hello, geek-docs.com!” is displayed on the page.

Conclusion

Through this article, we learned why CSS styles don’t work when setting innerHTML in JavaScript, and how to solve this problem by using methods such as insertAdjacentHTML, createElement, appendChild, innerText, and textContent. In actual development, we can choose the appropriate method based on specific needs to dynamically modify page content while preserving the original style information.