Question

我正在尝试在HTML页面上显示一些JavaScript变量。

我第一次使用document.write()但是在调用函数时用它来覆盖当前页面。

在搜索之后，普遍的共识是document.write()不太受欢迎。还有什么其他选择？

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

jsFiddle说明了我的问题http://jsfiddle.net/xHk5g/

Answer 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>的一部分，我通常只需添加一个类似value的空元素，或者我想要将其替换为主<div>的内容。 }。 e.g。

<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>

Answer 2

您可以使用javascript访问页面上的元素并修改其内容。例如，您可能有一个带有一些HTML标记的页面，如下所示：

<div id="MyEdit">
    This text will change
</div>

您可以使用javascript更改内容，如此...

document.getElementById("MyEdit").innerHTML = "My new text!";

Here is a working example

您还可以查看使用JQuery javascript library进行DOM操作，它有一些很棒的功能可以让这样的事情变得非常简单。

例如，使用JQuery，您可以执行此操作以获得相同的结果...

$("#MyEdit").html("My new text!");

Here is a working example of the JQuery version

根据您在帖子中提供的this example。以下JQuery适合您：

var x = "hello wolrd";
$("p").html(x);

Here is the working version

不建议使用此类P标记。理想情况下，您希望使用具有唯一ID的元素，以便确保使用JQuery选择正确的ID。

Answer 3

有不同的方法可以做到这一点。一种方法是编写一个检索命令的脚本。像这样：

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>

我希望这有助于：）

Answer 4

您可以使用jquery来获取要加载值的html元素。

比如说你的网页看起来像这样，

<div id="FirstDiv">
  <div id="SecondDiv">
     ...
  </div>
 </div>

如果你的javascript（我希望）看起来像这样简单，

function somefunction(){
  var somevalue = "Data to be inserted";
  $("#SecondDiv").text(somevalue);
}

我希望这就是你要找的东西。

Answer 5

innerHTML很好并且仍然有效。在大大小小的项目上一直使用它。我刚刚在我的IDE中打开了一个打开的选项卡，那里有一个。

 document.getElementById("data-progress").innerHTML = "<img src='../images/loading.gif'/>";

自2005年以来js + dom操作没有太大变化，除了增加更多的库。您可以轻松设置其他属性，例如

   uploadElement.style.width = "100%";

Answer 6

如果你想避免使用innerHTML，可以使用DOM方法构造元素并将它们附加到页面上。

var element = document.createElement('div');
var text = document.createTextNode('This is some text');
element.appendChild(text);
document.body.appendChild(element);

Answer 7

嗨这里有一个简单的例子：<div id="test">content</div>和

var test = 5;
document.getElementById('test').innerHTML = test;

您可以在此处测试：http://jsfiddle.net/SLbKX/

Answer 8

向页面添加元素（例如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!';

Answer 9

与上面类似，但我使用过（这是在CSHTML中）：

JavaScript的：

var value = "Hello World!"<br>
$('.output').html(value);

CSHTML：

<div class="output"></div>

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

9 个答案:

HTML

的JavaScript

完整的例子。点击运行代码段进行试用。