JS 之 innerHTML

定义和用法

innerHTML 属性用于设置或返回指定标签之间的 HTML 内容。

语法

Object.innerHTML = "HTML";// 设置
var html = Object.innerHTML;// 获取

例子 1

获取段落p的 innerHTML（html内容）

<html>
<head>
<script type="text/javascript">
function getInnerHTML(){
    alert(document.getElementById("test").innerHTML);
}
</script>
</head><body>
<p id="test"><font color="#000">嗨豆壳 www.hi-docs.com</font></p>
<input type="button" onclick="getInnerHTML()" value="点击" />
</body>
</html>

例子 2

设置段落p的 innerHTML（html内容）

<html>
<head>
<script type="text/javascript">
function setInnerHTML(){
    document.getElementById("test").innerHTML = "<strong>设置标签的html内容</strong>";
}
</script>
</head><body>
<p id="test"><font color="#000">嗨豆壳 www.hi-docs.com</font></p>
<input type="button" onclick="setInnerHTML()" value="点击" />
</body>
</html>

例子3 ：document.body.innerHTML

<htmL>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type">
    <script type="text/javascript">
    window.onload = function(){ 
        var arrLi = {我的朋友:['哇哈哈','乐百氏','农夫山泉'],同学:['咖啡','果汁','果酒']};
        var n = -1
        for(var i in arrLi){ 
            n++;
            document.body.innerHTML += '<ul>'+i+'</ul>';
            var ul = document.getElementsByTagName('ul');
            for (var j = 0; j < arrLi[i].length; j++) {
                ul[n].innerHTML += '<li>'+arrLi[i][j]+'</li>';
            };
        }
    }
    </script>
</head>
<body>

</body>
</htmL>