JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

JavaScript innerHTML

通过JavaScript来创建节点是比较麻烦的一件事情,尤其是节点多的时候。这个时候,可以使用 innerHTML 来代替。

( 1 ) innerHTML可以向指定的节点直接插入HTML代码。

语法:
    nodeObject.innerHTML=HTMLCode
其中,nodeObject 为节点对象,HTMLCode 为HTML代码。

注意:innerHTML 会覆盖原来的HTML代码。

举例,向 id="demo" 的节点添加三个新节点:
<div id="demo">
    <div>点击这里添加新节点</div>
</div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        this.innerHTML="<div>这是新节点 1</div><div>这是新节点 2</div><div>这是新节点 3</div>";
    }
</script>

实例演示:
点击这里添加新节点

可以看出来,innerHTML 能让我们省事很多。

innerHTML 自带了语法检查功能,能自动把不完整的HTML代码补充完整。

( 2 ) 另外,也可以通过 innerHTML 来获取指定节点内部的HTML代码。

举例,获取 id="demo" 的节点内部的HTML代码:
<div id="demo">
    <div>点击这里获取HTML代码</div>
    <div>节点</div>
    <div>节点</div>
</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    alert(this.innerHTML);
}
</script>

实例演示:
点击这里获取HTML代码
节点
节点