如何在没有document.write的HTML页面中显示JavaScript变量 [英] How to display JavaScript variables in a HTML page without document.write
问题描述
我试图在我的HTML页面上显示一些JavaScript变量。
我第一次使用 document.write（），但是当函数被调用时它用于覆盖当前页面。
经过搜索后，普遍认为 document.write（）不是很受欢迎。还有什么其他的选择？
我发现了一个页面，建议使用 .innerHTML 但是是2005年编写的。
一个说明我的问题的jsFiddle http://jsfiddle.net/xHk5g/
Element.innerHTML 几乎是要走的路。以下是一些使用它的方法：
HTML
< div class =results>< / div>
JavaScript
//'Modern'浏览器（IE8 +，使用CSS样式选择器）
document.querySelector（'。results'）。innerHTML ='Hello World！';
//使用jQuery库
$（'。results'）。html（'Hello World！'）;
如果您只想更新< div> / code>我通常只需添加一个空元素，其类如 value ，或者我想将其内容替换为主元素<< ; DIV> 。例如
< div class =content> Hello< span class ='value >< /跨度>< / DIV>
然后我会使用这样的代码：
//'现代'浏览器（IE8 +，使用CSS样式选择器）
document.querySelector（'。content .value'） .innerHTML ='World！';
//使用jQuery库
$（。content .value）。html（World！）;
然后，HTML / DOM现在包含：
< div class =content> Hello< span class ='value'> World！< / span> DIV>
完整示例。点击run snippet来试用。
//纯JavaScript Javascript Examplevar $ jsName = document.querySelector（'。 name'）; var $ jsValue = document.querySelector（'。jsValue'）; $ jsName.addEventListener（'input'，function（event）{$ jsValue.innerHTML = $ jsName.value;}，false）; // JQuery examplevar $ jqName = $（'。name'）; var $ jqValue = $（'。jqValue'）; $ jqName.on（'input'，function（event）{$ jqValue.html（$ jqName.val（）） ;}）;
html {font-family：sans-衬线; 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 =viewportcontent =width = device-width> < title>设置HTML内容示例< / title>< / head>< body> <！ - 此<输入>字段是我从中获取名称的地方 - > < label>输入您的名称：< input class =nametype =textvalue =World/>< / label> <！ - 普通的Javascript示例 - > < h1>普通Javascript示例< / h1> Hello< span class =jsValue>世界< / span> <！ - jQuery示例 - > < h1> jQuery示例< / h1> Hello< span class =jqValue> World< / span>< / body>< / html>
I am trying to display some JavaScript variable on my HTML page.
I was first using document.write() but it use to overwrite the current page when the function was called.
After searching around, the general consensus was that document.write() isn't liked very much. What are the other options?
I found a page suggesting using .innerHTML but that was written in 2005.
A jsFiddle illustrating my problem http://jsfiddle.net/xHk5g/
Element.innerHTML is pretty much the way to go. Here are a few ways to use it:
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:
<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>
这篇关于如何在没有document.write的HTML页面中显示JavaScript变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
