如何在没有document.write的情况下在HTML页面中显示JavaScript变量

一尘不染

如何在没有document.write的情况下在HTML页面中显示JavaScript变量

javascript

我正在尝试在HTML页面上显示一些JavaScript变量。我第一次使用document.write()它，但是当调用该函数时，它用于覆盖当前页面。

在四处搜寻之后，普遍的共识是人们document.write()对此不太喜欢。还有哪些其他选择？

我找到了一个建议使用的页面，.innerHTML但该页面写于2005年。

阅读 316

2020-05-01

共1个答案

一尘不染

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>

2020-05-01