html5 value调用变量的写法,如何在没有document.write的情况下在HTML页面中显示JavaScript变量...

Element.innerHTML几乎是要走的路。以下是使用它的几种方法：

HTML

JavaScript的

// 'Modern' browsers (IE8+, use CSS-style selectors)

document.querySelector('.results').innerHTML = 'Hello World!';

// Using the jQuery library

$('.results').html('Hello World!');

如果您只想更新

I 的一部分，通常只需要添加一个类似value或类的空元素，就可以将main的内容替换为

。例如

Hello

然后，我将使用以下代码：

// 'Modern' browsers (IE8+, use CSS-style selectors)

document.querySelector('.content .value').innerHTML = 'World!';

// Using the jQuery library

$(".content .value").html("World!");

然后，HTML / DOM现在将包含：

Hello World!

完整的例子。点击“运行摘要”进行尝试。

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

}

Setting HTML content example

Enter your name:

Plain Javascript Example

Hello World

jQuery Example

Hello World