How to replace innerHTML of a div | jQuery

The innerHTML property is used to write the dynamic HTML content on an HTML document. When you need to replace the innerHTML dynamic content you can use the jQuery html() function and provide the new content.

$(selector).html(content)

Example

$('#msg').html('Div content changed...');

The jQuery html() method sets or returns the innerHTML content of the selected elements. When this method is used to set content, it overwrites the content of ALL matched elements.

Browser View

Hello World!!

Full Source | jQuery

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btnClick").click(function(){ $('#msg').html('Div content changed...'); }); }); </script> </head> <body> <div id="msg">Hello World!!</div> <button id="btnClick">Click me</button> </body> </html>

jQuery text()

You can use jQuery text() function to achieve the same. However, the text() function will change the (text) value of the specified element, but keep the html structure.

$(selector).text()

Example

$('#msg').text('Div content changed...');

Difference between text() and html() method in jQuery

The jQuery.html() treats the string as HTML, jQuery.text() treats the content as text. The .html() method is not available in XML documents. Unlike the .html() method, jQuery .text() can be used in both XML and HTML documents. Also, .html() method is 2x faster than .text()

Change innerHTML content using JavaScript

You can use pure JavaScript to replace innerHTML of a div.

msg.innerHTML = 'Div content changed...'

Get innerHTML content using html()

When jQuery .html() method is used to return content, it returns the content of the FIRST matched element.

var cont = $('#msg').html();

Next : Change the selected value of a drop-down list using jQuery

Related Topics