I have following value in table cell with bold & colour formatting

cell id="total"; value="HI"

But when i change the value of the cell as below, it ignores text formatting

document.getElementById("total").innerHTML = "Hello"

and resulting in

Hello (with out bold and color)

I have following value in table cell with bold & colour formatting

cell id="total"; value="HI"

But when i change the value of the cell as below, it ignores text formatting

document.getElementById("total").innerHTML = "Hello"

and resulting in

Hello (with out bold and color)

• javascript
• html
• css

Share Improve this question Follow asked Aug 18, 2013 at 18:09 loganlogan 8,4163838 gold badges122122 silver badges188188 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

That's because you are replacing the existing content with just "Hello" -- the styling of the previous content was due to properties of the content itself, and that doesn't stick around because that content is wiped out.

If you want styling for your new content you need to provide it manually, for example

document.getElementById("total").innerHTML = "<strong>Hello</strong>";

I think the better solution would be to apply your styles through a stylesheet, as follows:

#total {
    font-weight: bold;
    color: #FF0000; /* Replace this with the right color */
}

Now,

document.getElementById("total").innerHTML = "Hello";

should allow the cell to keep its styles.

Yes the best approach would probably be to use CSS styles.