用Javascript更改完整的DIV内容
Change complete DIV-Content with Javascript
我是Javascript的新手,已经知道如何用它来更改HTML中的内容。但是现在,我想更改完整的div内容。
我有一个div,里面有两个按钮,其中一个按钮叫做"Login"。我想要的是:
当访问者点击"登录"时,div会显示"另一个内容",您现在可以登录。
我该怎么做?
编辑:
DIV内容:
<div id="vote" align="center">
<span style="font-size: 30px">Voten</span><br /><br />
<?php
if(isset($_SESSION['username']) && isset($_SESSION['password'])) {
?>
<?php
} else {
?>
<script type="text/javascript">
function login() {
Change div content....
}
function register() {
alert('coming soon, lol');
}
</script>
You must be logged in, to vote.<br />
<input type="button" class="button" name="login" id="login" value="Login" onclick="login()" /><br /><br />
Not a member yet?<br />
<input type="button" class="button" name="login" id="register" value="Register now!" onclick="register()" />
<?php
}
?>
再次:我想要的是,如果访问者单击登录按钮,div内容将更改为不同的html代码。
使用纯JavaScript,您有两种可能性:
- 在div对象上使用innerHTML属性,该属性将解析您并创建DOM节点
- 自己创建这些DOM节点。DOM的维基百科链接
使用innerHTML:
这将使用浏览器的HTML解析器。
// You first have to select this DIV, for example by Id
var divContainer = document.getElementById('idOfDiv');
// Let's set the new HTML content of the div
divContainer.innerHTML = '<b>The HTML code you want !</b>';
创建DOM节点:
var divContainer = document.getElementById('idOfDiv');
// You need to create the DOM nodes you want want to append
var newDomNode = document.createElement('p'); // Put as property the tag you want to create
// You have multiple choices here, you can set again the newDomNode innerHTML :
newDomNode.innerHTML = '<b>Some HTML</b>';
// Or the innerText : ( This will just put text )
newDomNode.innerText = 'Some Text to say Hello!';
然后,您需要将创建的newDomNode
附加到所需的DIV,这将插入节点作为容器的最后一个子节点:
divContainer.appendChild();
您可以递归地附加这些节点。例如,您可以将另一个DOM节点附加到newDomNode
。如果您想使用divContainer.insertBefore()
(链接),也可以将节点放在您想要的位置。
这是纯JavaScript,这是了解JavaScript如何工作的好方法。在使用jQuery之前,了解DOM是非常重要的。但在现实生活中,使用像jQuery这样的库会更容易。
相关文章:
- 将Div内容复制到文本区域或具有相同字体族样式的文本
- jQuery在5秒钟后隐藏/删除DIV内容
- 基于地理IP更改Div内容
- 如何使用Javascript替换和隐藏Div内容
- 用Div内容创建obj
- 使用CSS打印DIV内容,不起作用
- 筛选 DIV 内容
- 需要帮助-用数据库中的数据替换DIV内容而不刷新(使用-jquery、hmlhttp、CI)
- 将DIV内容复制到另一个DIV
- 单击时切换Div内容
- 使用不同的API参数更新DIV内容
- 通过Javascript在Div中动态插入Div内容
- 刷新 Div 内容(仅限本地.html)
- 基于多个可能的 DIV 内容的 JavaScript 操作
- 如何根据另一个 DIV 内容的可见性显示 DIV 内容
- 在 jQuery 文本区域中编辑 Div 内容
- 在 JQuery 对话框中隐藏和显示 Div 内容
- 如何获取本地页面DIV内容并发布
- 在 C# 或 JavaScript 中将 DIV 内容转换为图像
- 悬停打开 DIV 时,DIV 内容应从单独的 URL 动态加载