I am trying to display some JavaScript variable on my HTML page.
我试图在HTML页面上显示一些JavaScript变量。
I was first using document.write() but it use to overwrite the current page when the function was called.
我最初使用document.write()，但在调用函数时，它用于覆盖当前页面。
After searching around, the general consensus was that document.write() isn't liked very much. What are the other options?
搜索之后，普遍的共识是document。write()不太喜欢。还有其他选择吗?
I found a page suggesting using .innerHTML but that was written in 2005.
我发现一个页面建议使用。innerhtml，但那是2005年写的。
A jsFiddle illustrating my problem http://jsfiddle.net/xHk5g/
演示我的问题http://jsfiddle.net/xHk5g/的jsFiddle
9 个解决方案
#1
88
Element.innerHTML is pretty much the way to go. Here are a few ways to use it:
元素。innerHTML差不多就是这样了。这里有一些使用它的方法:
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:
那么HTML/DOM现在将包含:
<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>#2
13
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:
可以使用javascript访问页面上的元素并修改它们的内容。例如，你可能有一个带有HTML标记的页面，比如:
<div id="MyEdit">
This text will change
</div>
You can use javascript to change the content like so...
您可以使用javascript来更改内容，比如……
document.getElementById("MyEdit").innerHTML = "My new text!";
这里有一个工作示例
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.
您还可以使用JQuery javascript库进行DOM操作，它有一些很棒的特性，可以让事情变得非常简单。
For example, with JQuery, you could do this to acheive the same result...
例如，使用JQuery，您可以这样做来获得相同的结果……
$("#MyEdit").html("My new text!");
Here is a working example of the JQuery version
下面是JQuery版本的一个工作示例
Based on this example you provided in your post. The following JQuery would work for you:
基于您在文章中提供的示例。以下JQuery可以帮助您:
var x = "hello wolrd";
$("p").html(x);
这是工作版本。
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.
但是不推荐使用这样的P标签。理想情况下，您希望使用具有惟一ID的元素，这样您就可以确保使用JQuery选择正确的ID。
#3
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.
或者我们可以使用默认的JavaScript方式来打印它。
var name="kieran";
document.getElementById("output").innerHTML=name;
and the html code would be:
<p id="output"></p>
i hope this helped :)
我希望这能有所帮助。
#4
3
You could use jquery to get hold of the html element that you want to load the value with.
您可以使用jquery获取希望加载该值的html元素。
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,
如果你的javascript(我希望)看起来像这样简单，
function somefunction(){
var somevalue = "Data to be inserted";
$("#SecondDiv").text(somevalue);
}
I hope this is what you were looking for.
我希望这就是你要找的。
#5
2
If you want to avoid innerHTML you can use the DOM methods to construct elements and append them to the page.
如果希望避免innerHTML，可以使用DOM方法构造元素并将它们附加到页面中。
var element = document.createElement('div');
var text = document.createTextNode('This is some text');
element.appendChild(text);
document.body.appendChild(element);
#6
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.
innerHTML仍然有效。在大大小小的项目上都要用到它。我只是在IDE中打开一个选项卡，那里有一个。
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
自2005年以来，除了增加更多的库之外，js + dom操作没有什么变化。您可以轻松地设置其他属性，例如
uploadElement.style.width = "100%";
#7
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/
您可以在这里测试:http://jsfiddle.net/SLbKX/
#8
0
Add an element to your page (such as a div) and write to that div.
向页面添加一个元素(例如div)并将其写入该div。
HTML:
HTML:
<html>
<header>
<title>Page Title</title>
</header>
<body>
<div id="myDiv"></div>
</body>
</html>
jQuery:
jQuery:
$('#myDiv').text('hello world!');
javascript:
javascript:
document.getElementById('myDiv').innerHTML = 'hello world!';
#9
0
Similar to above, but I used (this was in CSHTML):
与上面类似，但我使用(这是CSHTML):
JavaScript:
JavaScript:
var value = "Hello World!"<br>
$('.output').html(value);
CSHTML:
CSHTML:
<div class="output"></div>
#1
88
Element.innerHTML is pretty much the way to go. Here are a few ways to use it:
元素。innerHTML差不多就是这样了。这里有一些使用它的方法:
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:
那么HTML/DOM现在将包含:
<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>#2
13
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:
可以使用javascript访问页面上的元素并修改它们的内容。例如，你可能有一个带有HTML标记的页面，比如:
<div id="MyEdit">
This text will change
</div>
You can use javascript to change the content like so...
您可以使用javascript来更改内容，比如……
document.getElementById("MyEdit").innerHTML = "My new text!";
这里有一个工作示例
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.
您还可以使用JQuery javascript库进行DOM操作，它有一些很棒的特性，可以让事情变得非常简单。
For example, with JQuery, you could do this to acheive the same result...
例如，使用JQuery，您可以这样做来获得相同的结果……
$("#MyEdit").html("My new text!");
Here is a working example of the JQuery version
下面是JQuery版本的一个工作示例
Based on this example you provided in your post. The following JQuery would work for you:
基于您在文章中提供的示例。以下JQuery可以帮助您:
var x = "hello wolrd";
$("p").html(x);
这是工作版本。
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.
但是不推荐使用这样的P标签。理想情况下，您希望使用具有惟一ID的元素，这样您就可以确保使用JQuery选择正确的ID。
#3
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.
或者我们可以使用默认的JavaScript方式来打印它。
var name="kieran";
document.getElementById("output").innerHTML=name;
and the html code would be:
<p id="output"></p>
i hope this helped :)
我希望这能有所帮助。
#4
3
You could use jquery to get hold of the html element that you want to load the value with.
您可以使用jquery获取希望加载该值的html元素。
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,
如果你的javascript(我希望)看起来像这样简单，
function somefunction(){
var somevalue = "Data to be inserted";
$("#SecondDiv").text(somevalue);
}
I hope this is what you were looking for.
我希望这就是你要找的。
#5
2
If you want to avoid innerHTML you can use the DOM methods to construct elements and append them to the page.
如果希望避免innerHTML，可以使用DOM方法构造元素并将它们附加到页面中。
var element = document.createElement('div');
var text = document.createTextNode('This is some text');
element.appendChild(text);
document.body.appendChild(element);
#6
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.
innerHTML仍然有效。在大大小小的项目上都要用到它。我只是在IDE中打开一个选项卡，那里有一个。
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
自2005年以来，除了增加更多的库之外，js + dom操作没有什么变化。您可以轻松地设置其他属性，例如
uploadElement.style.width = "100%";
#7
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/
您可以在这里测试:http://jsfiddle.net/SLbKX/
#8
0
Add an element to your page (such as a div) and write to that div.
向页面添加一个元素(例如div)并将其写入该div。
HTML:
HTML:
<html>
<header>
<title>Page Title</title>
</header>
<body>
<div id="myDiv"></div>
</body>
</html>
jQuery:
jQuery:
$('#myDiv').text('hello world!');
javascript:
javascript:
document.getElementById('myDiv').innerHTML = 'hello world!';
#9
0
Similar to above, but I used (this was in CSHTML):
与上面类似，但我使用(这是CSHTML):
JavaScript:
JavaScript:
var value = "Hello World!"<br>
$('.output').html(value);
CSHTML:
CSHTML:
<div class="output"></div>