HTML Javascript change div content

Question

I have simple HTML code with some javascript  it looks like    x000D   x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt script type  text javascript  gt  x000D      function changeDivContent            x000D         x000D     lt  script gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D     lt input type  radio  name  radiobutton  value  A  onClick  changeDivContent    gt  x000D     lt input type  radio  name  radiobutton  value  B  onClick  changeDivContent    gt  x000D   x000D     lt div id  content  gt  lt  div gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    I just wanted to be able to change the div s content  it s inner html  with selecting one of  A  or  B  radio buttons  but div content does not have javascript attribute  value   so I am asking how it can be done

User · Answer

change onClick to onClick  changeDivContent this   and try  function changeDivContent btn      content innerHTML   btn value      x000D   x000D  function changeDivContent btn    x000D    content innerHTML   btn value x000D    x000D   lt input type  radio  name  radiobutton  value  A  onClick  changeDivContent this   gt  x000D   lt input type  radio  name  radiobutton  value  B  onClick  changeDivContent this   gt  x000D   x000D   lt div id  content  gt  lt  div gt  x000D   x000D   x000D

User · Answer

you can use following helper function   function content divSelector  value        document querySelector divSelector  innerHTML   value     content   content   whatever      Where  content must be valid CSS selector  Here is working example     Additionaly - today  2018 07 01  I made speed comparison for jquery and pure js solutions   MacOs High Sierra 10 13 3 on Chrome 67 0 3396 99  64-bit   Safari 11 0 3  13604 5 6   Firefox 59 0 2  64-bit      document getElementById  content   innerHTML    whatever      pure JS     content   html  whatever                                  jQuery     The jquery solution was slower than pure js solution  69  on firefox  61  on safari  56  on chrome  The fastest browser for pure js was firefox with 560M operations per second  the second was safari 426M  and slowest was chrome 122M   So the winners are pure js and firefox  3x faster than chrome      You can test it in your machine  https   jsperf com js-jquery-html-content-change

User · Answer

Get the id of the div whose content you want to change then assign the text as below       var myDiv   document getElementById  divId      myDiv innerHTML    Content To Show

User · Answer

Assuming you re not using jQuery or some other library that makes this sort of thing easier for you  you can just use the element s innerHTML property   document getElementById  content   innerHTML    whatever

User · Answer

content   html  whatever

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt     lt meta charset  utf-8  gt     lt meta name  viewport  content  width device-width  gt     lt title gt JS Bin lt  title gt   lt  head gt   lt body gt     lt input type  radio  name  radiobutton  value  A  onclick    populateData event   gt     lt input type  radio  name  radiobutton  value  B  onclick    populateData event   gt        lt div id  content  gt  lt  div gt   lt  body gt   lt  html gt    -----------------JS- code------------  var targetDiv   document getElementById  content        var htmlContent            function populateData event         switch event target value           case  A             htmlContent    Content for A             break                    case  B              htmlContent    content for B   break                          targetDiv innerHTML   htmlContent            Step1  on click of the radio button it calls function populate data  with event  an object that has event details such as name of the element  value etc      Step2  I extracted the value through event target value and then simple switch will give me freedom to add custom text      Live Code  https   jsbin com poreway edit html js output

[javascript] HTML/Javascript change div content

Examples related to javascript

Examples related to html