How to replace innerHTML of a div | jQuery

The innerHTML property serves to insert dynamic HTML content within an HTML document. To update or replace this dynamic content, the jQuery .html() function proves invaluable. By invoking this function and supplying the desired new content, developers can efficiently alter the content displayed within an HTML element, ensuring a dynamic and responsive user experience.

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

The jQuery .html() method serves the purpose of both assigning and retrieving the innerHTML content of selected elements. When utilized to set content, it effectively replaces the existing content within all matched elements. This functionality enables streamlined manipulation of HTML content across multiple elements while maintaining uniformity in the specified changes.

run this source code 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 set innerHTML content

jQuery text()

The jQuery .text() function offers an alternative approach with a slightly different outcome. While both .html() and .text() functions can modify content, the .text() function specifically alters the text value of the designated element while preserving the HTML structure. This distinction allows developers to manipulate textual content without affecting the underlying HTML framework.

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

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

The contrasting behavior between .html() and .text() in jQuery lies in their treatment of content. While .html() interprets the input string as HTML, .text() interprets it as plain text. An important distinction arises when considering the context: .html() lacks availability in XML documents, whereas .text() finds utility in both XML and HTML documents. Moreover, it's noteworthy that .html() exhibits faster performance—twice as fast as .text()—further influencing the selection of the appropriate method based on efficiency.

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();

Conclusion

To replace the innerHTML of a <div> using jQuery, you can utilize the .html() method. By selecting the desired <div> element and applying .html() with the new content, you dynamically update its contents. This approach provides a seamless way to modify and refresh the displayed information within the targeted <div> .






Related Topics
  1. How to get input textbox value using jQuery
  2. JQuery Get Selected Dropdown Value on Change Event
  3. How to submit a form using ajax in jQuery
  4. How can I get the ID of an element using jQuery
  1. Open Bootstrap modal window on Button Click Using jQuery
  2. How to select an element with its name attribute | jQuery
  3. How to get the data-id attribute using jQuery
  4. How to disable/enable submit button after clicked | jQuery
  5. How to get the value of a CheckBox with jQuery
  6. How to wait 'X' seconds with jQuery?
  7. How to check if an enter key is pressed with jQuery
  8. How to allow numbers only in a Text Box using jQuery
  9. How to dynamically create a div in jQuery?