innerHTML属性

innerHTML属性
* 这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

第一个作用：获取文本内容
*** //获取span标签
var span1 = document.getElementById("sid");
alert(span1.innerHTML);

<body>
    <span id="sid">哈哈呵呵</span>

    <div id="div11">        
    </div>
    <script type="text/javascript">
        //获取span标签 获取文本内容我们一般用这个innerHTML 获取标签里边的文本内容
        var span1 = document.getElementById("sid");
        alert(span1.innerHTML);
    </script>
 </body>

第二个作用：向标签里面设置内容（可以是html代码）
*** //向div里面设置内容 <h1>AAAAA</h1>
//获取到div
var div11 = document.getElementById("div11");
//设置内容
div11.innerHTML = "<h1>AAAAA</h1>";

<body>
    <span id="sid">哈哈呵呵</span>

    <div id="div11">
        
    </div>
    <script type="text/javascript">
        //向div里面设置内容 <h1>AAAAA</h1>
        //获取到div
        var div11 = document.getElementById("div11");
        //设置内容
        div11.innerHTML = "<h1>AAAAA</h1>";
    </script>

 </body>

** 练习：向div里面添加一个表格
- //向div里面添加一个表格
//var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";
var tab = "<table>";
tab += "</table>";

//相当于 var tab = "<table></table>";

div11.innerHTML = tab;

<body>
    <div id="div11">        
    </div>
    <script type="text/javascript">
        //向div里面添加一个表格
        var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";
    //    var tab = "<table>";
        //tab += "</table>";
        //相当于 var tab = "<table></table>";
        div11.innerHTML = tab;
    </script>
 </body>