我试图在我的 HTML 页面上显示一些 JavaScript 变量。
我第一次使用document.write()，但它用于在调用函数时覆盖当前页面。
搜索后，普遍的共识是document.write() 不太受欢迎。还有哪些其他选择？
我发现一个页面建议使用.innerHTML，但那是在 2005 年写的。
一个 jsFiddle 说明我的问题 http://jsfiddle.net/xHk5g/
【问题讨论】：
innerHTML 仍然是最简单的方法。您还可以创建一个文本节点并将其附加到目标节点。
标签： javascript jquery html
Element.innerHTML 几乎是要走的路。以下是几种使用方法：
<div class="results"></div>
// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.results').innerHTML = 'Hello World!';
// Using the jQuery library
$('.results').html('Hello World!');
如果您只想更新<div> 的一部分，我通常只需添加一个带有value 之类的空元素，或者我想将其内容替换为主要<div>。例如
<div class="content">Hello <span class='value'></span></div>
然后我会使用这样的代码：
// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.content .value').innerHTML = 'World!';
// Using the jQuery library
$(".content .value").html("World!");
那么 HTML/DOM 现在将包含：
<div class="content">Hello <span class='value'>World!</span></div>
// 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>【讨论】：
您可以使用 javascript 访问页面上的元素并修改其内容。因此，例如，您可能有一个带有一些 HTML 标记的页面，如下所示：
<div id="MyEdit">
This text will change
</div>
您可以使用 javascript 来更改内容...
document.getElementById("MyEdit").innerHTML = "My new text!";
您还可以查看使用JQuery javascript library 进行 DOM 操作，它有一些很棒的功能可以让这样的事情变得非常简单。
例如，使用 JQuery，您可以这样做来获得相同的结果...
$("#MyEdit").html("My new text!");
Here is a working example of the JQuery version
基于您在帖子中提供的this example。以下 JQuery 适合您：
var x = "hello wolrd";
$("p").html(x);
不推荐使用像这样的P 标签。理想情况下，您希望使用具有唯一 ID 的元素，以便确保使用 JQuery 选择正确的元素。
【讨论】：
document.getElementById("MyEdit").innerHtml("My new text!"); 应为 document.getElementById("MyEdit").innerHtml="My new text!";
有不同的方法可以做到这一点。 一种方法是编写一个检索命令的脚本。 像这样：
var name="kieran";
document.write=(name);
或者我们可以使用默认的 JavaScript 方式来打印它。
var name="kieran";
document.getElementById("output").innerHTML=name;
and the html code would be:
<p id="output"></p>
我希望这会有所帮助:)
【讨论】：
您可以使用 jquery 来获取要加载值的 html 元素。
例如，如果您的页面看起来像这样，
<div id="FirstDiv">
<div id="SecondDiv">
...
</div>
</div>
如果你的 javascript（我希望）看起来像这样简单，
function somefunction(){
var somevalue = "Data to be inserted";
$("#SecondDiv").text(somevalue);
}
我希望这就是你要找的。p>
【讨论】：
如果您想避免使用 innerHTML，您可以使用 DOM 方法来构造元素并将它们附加到页面。
var element = document.createElement('div');
var text = document.createTextNode('This is some text');
element.appendChild(text);
document.body.appendChild(element);
【讨论】：
innerHTML 很好并且仍然有效。在大大小小的项目上一直使用它。我刚刚在我的 IDE 中翻到一个打开的选项卡，那里就有一个。
document.getElementById("data-progress").innerHTML = "<img src='../images/loading.gif'/>";
自 2005 年以来，js + dom 操作没有太大变化，除了添加了更多库。您可以轻松设置其他属性，例如
uploadElement.style.width = "100%";
【讨论】：
appendChild 需要一个 DOM 节点，而不是字符串。
你好，这是一个简单的例子：<div id="test">content</div> 和
var test = 5;
document.getElementById('test').innerHTML = test;
你可以在这里测试它：http://jsfiddle.net/SLbKX/
【讨论】：
向您的页面添加一个元素（例如 div）并写入该 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!';
【讨论】：
与上面类似，但我使用过（这是在 CSHTML 中）：
JavaScript：
var value = "Hello World!"<br>
$('.output').html(value);
CSHTML：
<div class="output"></div>
【讨论】：