如何在没有document.write的情况下在HTML页面中显示JavaScript变量
我正在尝试在HTML页面上显示一些JavaScript变量。我第一次使用document.write()它，但是当调用该函数时，它用于覆盖当前页面。
在四处搜寻之后，普遍的共识是人们document.write()对此不太喜欢。还有哪些其他选择？
我找到了一个建议使用的页面，.innerHTML但该页面写于2005年。
问题答案：
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>I 的一部分，通常只需要添加一个类似value或类的空元素，就可以将main的内容替换为<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>
-
本文向大家介绍如何在没有document.write的HTML页面中显示JavaScript变量？，包括了如何在没有document.write的HTML页面中显示JavaScript变量？的使用技巧和注意事项，需要的朋友参考一下 在JavaScript中使用Element.innerHTML可以在HTML页面中显示JavaScript变量，而无需document.write。 您可以尝试通过以下
-
问题内容： 构建通知时，如何发出没有声音的通知？我正在构建通知，我的用户不喜欢它发出声音的事实。 如何将其更改为无声/无声？ 我如何显示通知： 我尝试在Google上进行搜索，但我得到的唯一结果是如何播放声音，而不是不播放声音… 编辑 在某些人看来，它可能是重复的，但是在我的我无法找到指定默认值的替代方法，而此新方法称为setDefaults 问题答案： 删除的行。它不会播放声音，但是如果需要，您
-
问题内容： 我在JSF页面中有这3个字段 我也有一个具有以下属性的后备豆： 我希望在将某些值插入字段val1和val2中而不刷新页面时，outputText元素自动更改其值。结果变量应以这种方式计算（它正在计算百分比）：（val1 * val2）/ 100 您能帮我解决我的一些疑问吗？： 我知道为此，我需要javascript或AJAX之类的东西。您认为最好的方法是什么？ 我很想知道我如何使用AJ
-
我写了一个游戏java脚本代码，我需要用超文本标记语言显示分数变量。我尝试它，但它总是打印0，而不是增加分数。分数变量递增1，但在超文本标记语言页面上，它保持显示0。在哪里我应该改变标签以正确显示它，还是我需要改变它java脚本得分功能？ 我的Java脚本代码： HTML代码：
-
问题内容： 我要使整个div可单击，并且在没有JavaScript且没有有效代码/标记的情况下单击时链接到另一个页面。 如果我有这个就是我想要的结果- W3C验证程序说，不应将块元素放置在内联元素内。有一个更好的方法吗？ 问题答案： 如果没有javascript且使用有效代码，单击整个div会链接到另一个页面，这可能吗？ 小学生回答：不。 正如您已经发表的另一条评论一样，在标签内嵌套一个标记是无效
-
我尝试使用下面的方法。 但是它显示了最后一行（每列）的值，而不是页脚中每列的总和（如图所示）。 我错过什么了吗？