How to display JavaScript variables in a HTML page without document.write
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 Examplevar $jsName = document.querySelector('.name');var $jsValue = document.querySelector('.jsValue');
$jsName.addEventListener('input', function(event){ $jsValue.innerHTML = $jsName.value;}, false);
// JQuery examplevar $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>
How can I print a new line in JS without using document.write?
Here's one way to do it:
function generate() {
document.getElementById("$").innerHTML = ""
var n = parseInt(prompt("Enter number: ")), str = "", currStr = "";
for (var i = 0; i < n; i++) {
str = "", currStr = document.getElementById("$").innerHTML
for (var j = 0; j <= i; j++) {
str+= "$"
document.getElementById("$").innerHTML = currStr + str + "<br/>";
}
}
};
<h3>Incremental $</h3>
<span id="$"></span>
<button onclick="generate()">Generate</button>
Add JavaScript variable to HTML
You could create a <span>
element and then use jQuery selector to set the html of that element.
Here is an example:
<div class = "box"><span class="span"></span>user</div>
<script type="text\javascript">
$(".box .span").html("Hello ");
</script>
Why doesn't document.write work on a variable with HTML tags?
Yes, it's a syntax error. If you want to output the contents of the Foo
variable within h1
tags, you need to use a template literal (ES2015+) or string concatenation:
// Template literal (ES2015+)
var Foo = "Foo Variable";
document.write(`<h1>${Foo}</h1>`);
or
// String concatenation
var Foo = "Foo Variable";
document.write("<h1>" + Foo + "</h1>");
But, there's almost no place for document.write
in modern web programming. Instead, use the DOM to add or update elements.
How to display javascript variables
Because you have syntax error.. check the console.
Correct code should be:
$jsName.addEventListener('input', function(event){
$jsValue.innerHTML = $jsName.value;
}, false);
write html in javascript without documet.write
JavaScript does not behave in the same way PHP does. Whatever you place between the <script>
tags is a script in and of itself.
So you have two separate scripts:
This:
for(i=0;i<=9;i++)
{
and this one:
}
Imagine what would happen if you placed these two scripts into two separate files? That's right, both would fail because of syntax errors. If you take a look at the console you'll see what errors I'm talking about.
If you want to print 10 buttons do something like this:
<div id="mainDiv">
</div>
<script>
var mainDiv = document.getElementById('mainDiv');
for(var i=0; i<10; i++){
mainDiv.innerHtml += "<input type='button' value='1'>";
}
</script>
Displaying javascript variable without clearing screen
You can use an html element on the page and fill it with data such as:
<span id="numClicksResult"></span>
<script>document.getElementById('numClicksResult').innerHtml=10;</script>
Can I use document.write into another html tag using JavaScript variables?
This example might help you:
const myProgressBar = document.getElementById("progressBar");const progressBarValue = 75; //custom value
myProgressBar.value = progressBarValue; //setting the value
<progress min="0" id="progressBar" max="100" value=""></progress>
Related Topics
How to Fix Blurry Text in My Html5 Canvas
Programmatically Selecting Partial Text in an Input Field
How to Use External ".Js" Files
Creating Svg Elements Dynamically With JavaScript Inside Html
Angular: Conditional Class With *Ngclass
How to Change/Remove CSS Classes Definitions At Runtime
Access CSS Variable from JavaScript
JavaScript File Per View in Rails
How to Access Previous Promise Results in a .Then() Chain
How to Get Browser Width Using JavaScript Code
Document.Write() Overwriting the Document
How to Parse HTML in Google Apps Script
Force Dom Redraw/Refresh on Chrome/Mac
How to Get Background Image Url of an Element Using JavaScript
Typeerror: $(...).Datatable Is Not a Function
Find the Longest Common Starting Substring in a Set of Strings