如何在HTML页面中显示JavaScript变量而不使用document.write

Question

如何在HTML页面中显示JavaScript变量而不使用document.write

javascriptjqueryhtml

67

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

我最初使用的是document.write()，但是当调用该函数时，它会覆盖当前页面。

搜索后，普遍认为document.write()不太受欢迎。还有什么其他选择？

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

这里有一个jsFiddle演示我的问题：http://jsfiddle.net/xHk5g/

- kishan patel

2

如果您能提供一些样例，那就太好了。 - Lion

1

使用 innerHTML 仍然是最简单的方法。您还可以创建一个文本节点并将其附加到目标节点。 - Felix Kling

9个回答

15

你可以使用 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选择正确的元素。

- musefan

@AndyE：是的，我也注意到了...对我来说太多的JQuery了 ;) - musefan

@musefan 当我输入我的答案时，我差点写了同样的话！我不知道人们是如何没有jQuery生活的 :P - jbabey

document.getElementById("MyEdit").innerHtml("My new text!"); 应该改为 document.getElementById("MyEdit").innerHtml="My new text!";。 - Lion

5

有不同的方法来完成这个任务。其中一种方法是编写一个检索命令的脚本。例如：

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>

我希望您能从中获得帮助 :)

- StandOrFall

3

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

例如，如果您的页面看起来像这样：

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

如果你的JavaScript代码（我希望如此）看起来像这样简单：

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

我希望这是你正在寻找的内容。

- Ajai

2

innerHTML是可行的，而且仍然有效。在大大小小的项目中都可以使用它。我刚才翻到我的IDE中的一个打开的选项卡，里面就有一个innerHTML。

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

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

   uploadElement.style.width = "100%";

- FlavorScape

appendChild 期望传入一个 DOM 节点，而不是一个字符串。 - Felix Kling

2

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

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

- david

奇怪，这似乎是对OP问题最相关的答案。虽然它是JAVASCRIPT而不是jQuery，但它可以是“可移植的”，避免在HTML中添加额外的容器。 - Milche Patern

1

你好，这里有一个简单的例子：<div id="test">内容</div>

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

你可以在这里测试：http://jsfiddle.net/SLbKX/

- djoStack

0

在您的页面中添加一个元素（例如 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!';

- jbabey

0

与上述类似，但我使用以下代码（这是在CSHTML中）：

JavaScript：

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

CSHTML：

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

- Crazy Cat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pseudosavant · Accepted Answer

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> 中的一部分内容，我通常会在主要的 <div> 中添加一个带有类似于 value 或者我想替换其内容的类名空元素。例如：

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