为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

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


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


在四处搜寻之后,普遍的共识document.write()是不太喜欢。还有哪些其他选择?


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


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


查看完整描述

3 回答

?
收到一只叮咚

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>


查看完整回答
反对 回复 2019-09-21
?
茅侃侃

您可以使用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将为您工作:


var x = "hello wolrd";

$("p").html(x);


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


查看完整回答
反对 回复 2019-09-21
?
阿波罗的战车

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


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>

我希望这可以帮助:)


查看完整回答
反对 回复 2019-09-21

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信