Home/ Questions/Q 7634121
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T07:05:18+00:00

I am trying to display some JavaScript variable on my HTML page. I was

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0