How to replace innerHTML of a div using jQuery

Question

How could I achieve the following  document all regTitle innerHTML    Hello World    Using jQuery where regTitle is my div id

User · Answer

jQuery has few functions which work with text  if you use text   one  it will do the job for you       regTitle   text  Hello World      Also  you can use html   instead  if you have any html tag

User · Answer

Example  x000D   x000D     document   ready function     x000D        msg   html  hello world    x000D      x000D       lt  DOCTYPE html gt  x000D       lt html gt  x000D         lt head gt  x000D           lt script src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt      x000D         lt  head gt  x000D         lt body gt  x000D           lt div class  msg  gt  lt  div gt  x000D         lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

The html   function can take strings of HTML  and will effectively modify the  innerHTML property       regTitle   html  Hello World      However  the text   function will change the  text  value of the specified element  but keep the html structure       regTitle   text  Hello world

User · Answer

regTitle   0  innerHTML    Hello World

User · Answer

jQuery s  html   can be used for setting and getting the contents of matched non empty elements  innerHTML    var contents     element  html      element  html  insert content into element

User · Answer

regTitle   html  Hello World

User · Answer

Pure JS and Shortest  Pure JS  regTitle innerHTML    Hello World     x000D   x000D  regTitle innerHTML    Hello World   x000D   lt div id  regTitle  gt  lt  div gt  x000D   x000D   x000D    Shortest    regTitle  html  Hello World        x000D   x000D     note  no quotes around regTitle x000D    regTitle  html  Hello World     x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  regTitle  gt  lt  div gt  x000D   x000D   x000D

User · Answer

If you instead have a jQuery object you want to render instead of the existing content  Then just reset the content and append the new  var itemtoReplaceContentOf       regTitle    itemtoReplaceContentOf html      newcontent appendTo itemtoReplaceContentOf    Or      regTitle   empty   append newcontent

User · Answer

There are already answers which give how to change Inner HTML of element  But I would suggest  you should use some animation like Fade Out  Fade In to change HTML which gives good effect of changed HTML rather instantly changing inner HTML  Use animation to change Inner HTML     regTitle   fadeOut 500  function           this  html  Hello World    fadeIn 500        If you have many functions which need this  then you can call common function which changes inner Html  function changeInnerHtml elementPath  newText         elementPath  fadeOut 500  function               this  html newText  fadeIn 500

User · Answer

Answer       regTitle   html  Hello World      Explanation     is equivalent to jQuery  Both represent the same object in the jQuery library  The   regTitle  inside the parenthesis is called the selector which is used by the jQuery library to identify which element s  of the html DOM  Document Object Model  you want to apply code to  The   before regTitle is telling jQuery that regTitle is the id of an element inside the DOM   From there  the dot notation is used to call the html function which replaces the inner html with whatever parameter you place in-between the parenthesis  which in this case is  Hello World

User · Answer

Here is your answer     This is the setter of the innerHTML property in jQuery     regTitle   html  Hello World       This is the getter of the innerHTML property in jQuery var helloWorld       regTitle   html

User · Answer

you can use either html or text function in jquery to achieve it      regTitle   html  hello world      OR      regTitle   text  hello world

User · Answer

Just to add some performance insights    A few years ago I had a project  where we had issues trying to set a large HTML   Text to various HTML elements   It appeared  that  recreating  the element and injecting it to the DOM was way faster than any of the suggested methods to update the DOM content   So something like    x000D   x000D  var text    very big content   x000D      regTitle   remove    x000D      lt div id  regTitle  gt     text     lt  div gt    appendTo  body    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D    Should get you a better performance  I haven t recently tried to measure that  browsers should be clever these days   but if you re looking for performance it may help   The downside is that you will have more work to keep the DOM and the references in your scripts pointing to the right object

[javascript] How to replace innerHTML of a div using jQuery?

Examples related to javascript

Examples related to jquery

Examples related to innerhtml