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/

It would have been nice, if you had provided us with some sample. — Lion
– Lion, Commented Mar 13, 2012 at 17:38
Using innerHTML is still the easiest way. You can also create a text node and append it to the target node. — Felix Kling
– Felix Kling, Commented Mar 13, 2012 at 17:39

pseudosavant · Accepted Answer · 2016-05-18 20:11:07Z

104

Element.innerHTML is pretty much the way to go. Here are a few ways to use it:

HTML

<div class="results"></div>

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 <div> I usually just add an empty element with a class like value or one I want to replace the contents of to the main <div>. e.g.

<div class="content">Hello <span class='value'></span></div>

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:

<div class="content">Hello <span class='value'>World!</span></div>

Full example. Click run snippet to try it out.

// Plain Javascript Example
var $jsName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');

$jsName.addEventListener('input', function(event){
  $jsValue.innerHTML = $jsName.value;
}, false);


// JQuery example
var $jqName = $('.name');
var $jqValue = $('.jqValue');

$jqName.on('input', function(event){
  $jqValue.html($jqName.val());
});

html {
  font-family: sans-serif;
  font-size: 16px;
}

h1 {
  margin: 1em 0 0.25em 0;
}

input[type=text] {
  padding: 0.5em;
}

.jsValue, .jqValue {
  color: red;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Setting HTML content example</title>
</head>
<body>
  <!-- This <input> field is where I'm getting the name from -->
  <label>Enter your name: <input class="name" type="text" value="World"/></label>
  
  <!-- Plain Javascript Example -->
  <h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>
  
  <!-- jQuery Example -->
  <h1>jQuery Example</h1>Hello <span class="jqValue">World</span>
</body>
</html>

edited May 18, 2016 at 20:11

answered Mar 13, 2012 at 17:40

pseudosavant

7,3042 gold badges41 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Ajai Over a year ago

isn't innerHtml replaces the entire html part inside an html element instead of just the text? I think the OP was referring to just displaying some JS variables on the page.

Felix Kling Over a year ago

@Ajai: So does your solution. Obviously one would create an element whose only purpose is to contain that value.

Ajai Over a year ago

@FelixKling: Actually not. My Solution just replaces the text part of the div. What happens if I want to display the value just inside FirstDiv in my solution and still want the FirstDiv hold the second div element? Would innerHtml just replace the value inside FirstDiv and not remove SecondDiv? I am just asking

kishan patel Over a year ago

The jQuery solution is working for me displaying the contents of the variable within a div.

pseudosavant Over a year ago

@JohnnyUtahh Check out the snippet I added. There is a plain Javascript and a jQuery example.

|

musefan · Accepted Answer · 2012-03-13 18:41:07Z

15

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:

<div id="MyEdit">
    This text will change
</div>

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.

edited Mar 13, 2012 at 18:41

answered Mar 13, 2012 at 17:39

musefan

48.5k21 gold badges144 silver badges193 bronze badges

3 Comments

musefan Over a year ago

@AndyE: Yes I spotted that... too much JQuery for me ;)

jbabey Over a year ago

@musefan i almost wrote the same thing when typing my answer! i don't know how people live without jQuery :P

Lion Over a year ago

document.getElementById("MyEdit").innerHtml("My new text!"); should be as document.getElementById("MyEdit").innerHtml="My new text!";

StandOrFall · Accepted Answer · 2014-02-10 15:58:13Z

5

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: 

<p id="output"></p>

i hope this helped :)

answered Feb 10, 2014 at 15:58

StandOrFall

511 silver badge2 bronze badges

Comments

Ajai · Accepted Answer · 2012-03-13 17:39:45Z

3

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,

<div id="FirstDiv">
  <div id="SecondDiv">
     ...
  </div>
 </div>

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.

answered Mar 13, 2012 at 17:39

Ajai

3,5105 gold badges30 silver badges41 bronze badges

Comments

david · Accepted Answer · 2012-03-13 17:44:19Z

2

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

answered Mar 13, 2012 at 17:44

david

18.3k4 gold badges45 silver badges60 bronze badges

1 Comment

Milche Patern Over a year ago

Weird, this seems to be the most relevant answer to the OP question. Although it's JAVASCRIPT and not jQuery, it can be 'portable' avoiding to add extra container in html.

FlavorScape · Accepted Answer · 2014-07-09 15:18:07Z

2

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 = "<img src='../images/loading.gif'/>";

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%";

edited Jul 9, 2014 at 15:18

answered Mar 13, 2012 at 17:42

FlavorScape

14.5k13 gold badges79 silver badges124 bronze badges

1 Comment

Felix Kling Over a year ago

appendChild expects a DOM node, not a string.

djoStack · Accepted Answer · 2013-05-08 11:09:22Z

1

hi here is a simple example: <div id="test">content</div> and

var test = 5;
document.getElementById('test').innerHTML = test;

and you can test it here : http://jsfiddle.net/SLbKX/

answered May 8, 2013 at 11:09

djoStack

1773 silver badges18 bronze badges

Comments

jbabey · Accepted Answer · 2012-03-13 17:40:30Z

0

Add an element to your page (such as a div) and write to that div.

HTML:

<html>
    <header>
        <title>Page Title</title>
    </header>

    <body>
        <div id="myDiv"></div>
    </body>
</html>

jQuery:

$('#myDiv').text('hello world!');

javascript:

document.getElementById('myDiv').innerHTML = 'hello world!';

answered Mar 13, 2012 at 17:40

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

Comments

Crazy Cat · Accepted Answer · 2015-09-03 15:26:53Z

0

Similar to above, but I used (this was in CSHTML):

JavaScript:

var value = "Hello World!"<br>
$('.output').html(value);

CSHTML:

<div class="output"></div>

answered Sep 3, 2015 at 15:26

Crazy Cat

1,49216 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

9 Answers 9

HTML

JavaScript

Full example. Click run snippet to try it out.

15 Comments

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

HTML

JavaScript

Full example. Click run snippet to try it out.

15 Comments

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related