kis*_*tel 60 html javascript jquery html5
我试图在我的HTML页面上显示一些JavaScript变量.
我是第一次使用,document.write()但它用于在调用函数时覆盖当前页面.
在四处寻找之后,普遍的共识document.write()是不太喜欢.还有什么其他选择？
我找到了一个建议使用的页面,.innerHTML但这是在2005年写的.
一个jsFiddle说明我的问题http://jsfiddle.net/xHk5g/
pse*_*ant 96
Element.innerHTML几乎是要走的路.以下是一些使用它的方法:
<div class="results"></div>
// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.results').innerHTML = 'Hello World!';
// Using the jQuery library
$('.results').html('Hello World!');
如果你只是想更新一部分<div>我通常只是添加一个类似value或类的空元素我想要替换主要的内容<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>mus*_*fan 13
您可以使用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选择正确的ID.
小智 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>
我希望这有助于:)
| 归档时间： |
|
| 查看次数： |
413428 次 |
| 最近记录： |