如何在没有document.write的HTML页面中显示JavaScriptvariables
我想在我的HTML页面上显示一些JavaScriptvariables。
我是第一次使用document.write()但它用来覆盖当前的页面，当函数被调用。
经过search后，普遍认为document.write()不是很受欢迎。 还有什么其他的select？
我发现一个页面build议使用.innerHTML但是这是在2005年写的。
一个jsFiddle说明我的问题http://jsfiddle.net/xHk5g/
Element.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!');
如果你只是想更新一个<div>的一部分，我通常只需要添加一个类似value的类或一个空的元素，我想把主目录的内容replace成<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="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库进行DOM操作，它有一些很棒的function，使这样的事情很容易。
例如，用JQuery，你可以做到这一点，以达到相同的结果…
$("#MyEdit").html("My new text!");
这是一个JQuery版本的工作示例
根据您在post中提供的这个例子 。 下面的JQuery会为你工作：
var x = "hello wolrd"; $("p").html(x);
这是工作版本
不build议使用这样的P标签。 理想情况下，您希望使用具有唯一ID的元素，以便确保使用JQueryselect正确的元素。
有不同的方法来做到这一点。 一种方法是编写一个脚本检索一个命令。 像这样：
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); }
我希望这是你正在寻找的。
如果你想避免使用innerHTML，你可以使用DOM方法来构build元素并将它们附加到页面上。
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='..http://img.dovov.comloading.gif'/>";
自2005年以来，js + dom操作没有多less变化，除了增加更多的库。 您可以轻松设置其他属性，如
uploadElement.style.width = "100%";
嗨，这里是一个简单的例子： <div id="test">content</div>和
var test = 5; document.getElementById('test').innerHTML = test;
你可以在这里testing它： 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>
