How to display JavaScript variables in a HTML page without document write

Question

I am trying to display some JavaScript variable on my HTML page    I was first using document write   but it use to overwrite the current page when the function was called    After searching around  the general consensus was that document write   isn t liked very much  What are the other options    I found a page suggesting using  innerHTML but that was written in 2005    A jsFiddle illustrating my problem http   jsfiddle net xHk5g

User · Answer

Add an element to your page  such as a div  and write to that div   HTML     lt html gt       lt header gt           lt title gt Page Title lt  title gt       lt  header gt        lt body gt           lt div id  myDiv  gt  lt  div gt       lt  body gt   lt  html gt    jQuery       myDiv   text  hello world       javascript   document getElementById  myDiv   innerHTML    hello world

User · Answer

Similar to above  but I used  this was in CSHTML    JavaScript   var value    Hello World   lt br gt      output   html value     CSHTML    lt div class  output  gt  lt  div gt

User · Answer

there are different ways of doing this  one way would be to write a script retrieving a command  like so    var name  kieran   document write  name     or we could use the default JavaScript way to print it    var name  kieran   document getElementById  output   innerHTML name   and the html code would be     lt p id  output  gt  lt  p gt    i hope this helped

User · Answer

innerHTML is fine and still valid  Use it all the time on projects big and small  I just flipped to an open tab in my IDE and there was one right there     document getElementById  data-progress   innerHTML     lt img src     images loading gif   gt      Not much has changed in js   dom manipulation since 2005  other than the addition of more libraries  You can easily set other properties such as     uploadElement style width    100

User · Answer

Element innerHTML is pretty much the way to go  Here are a few ways to use it   HTML   lt div class  results  gt  lt  div gt    JavaScript      Modern  browsers  IE8   use CSS-style selectors  document querySelector   results   innerHTML    Hello World        Using the jQuery library     results   html  Hello World       If you just want to update a portion of a  lt div gt  I usually just add an empty element with a class like value or one I want to replace the contents of to the main  lt div gt   e g    lt div class  content  gt Hello  lt span class  value  gt  lt  span gt  lt  div gt    Then I d use some code like this       Modern  browsers  IE8   use CSS-style selectors  document querySelector   content  value   innerHTML    World        Using the jQuery library     content  value   html  World       Then the HTML DOM would now contain    lt div class  content  gt Hello  lt span class  value  gt World  lt  span gt  lt  div gt    Full example  Click run snippet to try it out    x000D   x000D     Plain Javascript Example x000D  var  jsName   document querySelector   name    x000D  var  jsValue   document querySelector   jsValue    x000D   x000D   jsName addEventListener  input   function event   x000D     jsValue innerHTML    jsName value  x000D     false   x000D   x000D   x000D     JQuery example x000D  var  jqName       name    x000D  var  jqValue       jqValue    x000D   x000D   jqName on  input   function event   x000D     jqValue html  jqName val     x000D      x000D  html   x000D    font-family  sans-serif  x000D    font-size  16px  x000D    x000D   x000D  h1   x000D    margin  1em 0 0 25em 0  x000D    x000D   x000D  input type text    x000D    padding  0 5em  x000D    x000D   x000D   jsValue   jqValue   x000D    color  red  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt script src  https   code jquery com jquery-1 11 3 js  gt  lt  script gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  gt  x000D     lt title gt Setting HTML content example lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D     lt  -- This  lt input gt  field is where I m getting the name from -- gt  x000D     lt label gt Enter your name   lt input class  name  type  text  value  World   gt  lt  label gt  x000D     x000D     lt  -- Plain Javascript Example -- gt  x000D     lt h1 gt Plain Javascript Example lt  h1 gt Hello  lt span class  jsValue  gt World lt  span gt  x000D     x000D     lt  -- jQuery Example -- gt  x000D     lt h1 gt jQuery Example lt  h1 gt Hello  lt span class  jqValue  gt World lt  span gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

hi here is a simple example   lt div id  test  gt content lt  div gt  and   var test   5  document getElementById  test   innerHTML   test    and you can test it here   http   jsfiddle net SLbKX

User · Answer

You could use jquery to get hold of the html element that you want to load the value with   Say for instance if your page looks something like this    lt div id  FirstDiv  gt     lt div id  SecondDiv  gt              lt  div gt    lt  div gt    And if your javascript  I hope  looks something as simple as this   function somefunction      var somevalue    Data to be inserted         SecondDiv   text somevalue       I hope this is what you were looking for

User · Answer

You can use javascript to access elements on the page and modify their contents  So for example you might have a page with some HTML markup like so    lt div id  MyEdit  gt      This text will change  lt  div gt    You can use javascript to change the content like so     document getElementById  MyEdit   innerHTML    My new text       Here is a working example    You can also look at using the JQuery javascript library for DOM manipulation  it has some great features to make things like this very easy   For example  with JQuery  you could do this to acheive the same result         MyEdit   html  My new text       Here is a working example of the JQuery version    Based on this example you provided in your post  The following JQuery would work for you   var x    hello wolrd      p   html x     Here is the working version  Using a P tag like this however is not recommended  You would ideally want to use an element with a unique ID so you can ensure you are selecting the correct one with JQuery

User · Answer

If you want to avoid innerHTML you can use the DOM methods to construct elements and append them to the page    var element   document createElement  div    var text   document createTextNode  This is some text    element appendChild text   document body appendChild element

[javascript] How to display JavaScript variables in a HTML page without document.write

Examples related to javascript

Examples related to jquery

Examples related to html