如何在没有document.write的HTML页面中显示JavaScript变量
[英]How to display JavaScript variables in a HTML page without document.write
问题描述
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. 搜索后，普遍的共识是document.write()不太受欢迎。 What are the other options? 还有什么其他选择？
I found a page suggesting using .innerHTML but that was written in 2005. 我找到了一个建议使用.innerHTML的页面，但这是在2005年写的。
A jsFiddle illustrating my problem http://jsfiddle.net/xHk5g/ 一个jsFiddle说明我的问题http://jsfiddle.net/xHk5g/
9 个解决方案
解决方案1
95 已采纳 2012-03-13 17:40:19
Element.innerHTML is pretty much the way to go. Element.innerHTML几乎是要走的路。 Here are a few ways to use it: 以下是一些使用它的方法：
HTML HTML
<div class="results"></div>
JavaScript 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> . 如果你只是想更新<div>的一部分，我通常只需要添加一个类似value的空元素，或者我想将主内容替换为主<div> 。 eg 例如
<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 2012-03-13 17:39:31
You can use javascript to access elements on the page and modify their contents. 您可以使用javascript访问页面上的元素并修改其内容。 So for example you might have a page with some HTML markup like so: 例如，您可能有一个带有一些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!";
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. 您还可以看一下使用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);
Here is the working version 这是工作版本
Using a P tag like this however is not recommended. 但是不推荐使用像这样的P标签。 You would ideally want to use an element with a unique ID so you can ensure you are selecting the correct one with JQuery. 理想情况下，您希望使用具有唯一ID的元素，以便确保使用JQuery选择正确的ID。
解决方案3
5 2014-02-10 15:58:13
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 2012-03-13 17:39:45
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 2012-03-13 17:42:03
innerHTML is fine and still valid. innerHTML很好并且仍然有效。 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. 我刚刚在我的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. 自2005年以来js + dom操作没有太大变化，除了增加更多的库。 You can easily set other properties such as 您可以轻松设置其他属性，如
uploadElement.style.width = "100%";
解决方案6
2 2012-03-13 17:44:19
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);
解决方案7
1 2013-05-08 11:09:22
hi here is a simple example: <div id="test">content</div> and 嗨这里有一个简单的例子： <div id="test">content</div>和
var test = 5;
document.getElementById('test').innerHTML = test;
and you can test it here : http://jsfiddle.net/SLbKX/ 你可以在这里测试一下： http ： //jsfiddle.net/SLbKX/
解决方案8
0 2015-09-03 15:26:53
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>
解决方案9
0 2012-03-13 17:40:30
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!';
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.