How to keep CSS style If I change the html content dynamically?

Question

I dynamically change the HTML content. But when I change the content, all the CSS styling is removed. How can I keep the CSS style when I change the content dynamically?

<div id="sample">
    <a href="#" onClick="call()">Change it </a>
    <p id="para"> I am paragraph </p>
</div>

p {
    background-color: yellow;
}

function call(){    
    $("#para").replaceWith('oops css gone');
} 

Here is the jsFiddle: http://jsfiddle.net/rajagopalx/6sbvtpp6/

Answer 1

The issue is because you're replacing the entire p element with a textNode. Instead, just change the text of the initial p element by using the text() method:

function call(){    
    $("#para").text('oops css gone');
}  

Updated fiddle

Answer 2

function call(){    
    $("#para").replaceWith( '<p id="para">oops css gone</p>');

}

Don't forget to replace your tags as well.

Answer 3

If you replacing the element with a new one you could store the classnames and replying them to the new element.

.highlight {
    background-color: yellow;
}
----------------------------------------------
var replacedElement = $("<div />");
var storedClass = $("#para").attr("class");

replacedElement.text("yeah css still there");   
replacedElement.attr("class",storedClass);

http://jsfiddle.net/6sbvtpp6/2/

Answer 4

you can also use .html() function of jquery

function call(){    
    $("#para").html( 'oops css gone');
}  

Answer 5

.replaceWith replaces the entire element. There are many ways to go about it. Simplest of all is, either go for :

 function call(){    
        $("#para").text( 'oops css gone');
    }  

    or

    function call(){    
        $("#para").html( 'oops css gone');
    }  

There is this SO link for an understanding on the difference between .text() and .html()