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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (9)

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

我第一次使用document.write()它,但它用于覆盖当前的页面,当函数被调用。

经过四处搜寻,普遍的共识document.write()是不太喜欢。还有什么其他的选择?

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

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

提问于
用户回答回答于

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或者一个类的空元素,我想把它的内容替换为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>

用户回答回答于

您可以使用JavaScript访问页面上的元素并修改其内容。举例来说,你可能会有一个带有一些HTML标记的页面,如下所示:

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

你可以使用JavaScript来改变内容,就像这样...

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

这是一个工作示例

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

例如,用JQuery,你可以做到这一点,以达到相同的结果...

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

这是一个JQuery版本的工作示例

基于您在帖子中提供的这个例子。以下JQuery将为您工作:

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

这是工作版本

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

扫码关注云+社区