如何在没有document.write的超文本标记语言页面中显示JavaScript变量
如何在没有document.write的超文本标记语言页面中显示JavaScript变量
提问于 2012-03-14 01:36:00
我正试图在我的超文本标记语言页面上显示一些JavaScript变量。
我最初使用的是document.write()，但它用于在调用函数时覆盖当前页面。
在四处搜索之后，普遍的共识是document.write()不是很受欢迎。还有其他选择吗？
我发现一个页面建议使用.innerHTML，但那是在2005年写的。
说明我的问题http://jsfiddle.net/xHk5g/的jsFiddle
回答 8
Stack Overflow用户
回答已采纳
发布于 2012-03-14 01:40:19
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>的一部分，我通常只需要在主<div>中添加一个带有value类的空元素，或者添加一个我想替换其内容的类。例如：
<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>完整的示例。单击run snippet以试用它。
// 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>
Stack Overflow用户
发布于 2014-02-10 23:58:13
有不同的方法可以做到这一点。一种方法是编写一个检索命令的脚本。如下所示：
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>我希望这能有所帮助:)
Stack Overflow用户
发布于 2012-03-14 01:39:46
您可以使用jquery来获取要用来加载值的html元素。
例如，如果你的页面看起来像这样，
<div id="FirstDiv">
<div id="SecondDiv">
...
</div>
</div>如果你的javascript (我希望)看起来像这样简单，
function somefunction(){
var somevalue = "Data to be inserted";
$("#SecondDiv").text(somevalue);
}我希望这就是你要找的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9689109
复制相关文章
相似问题