码迷,mamicode.com
首页 > Web开发 > 详细

JS 之 innerHTML

时间:2016-08-05 19:36:53      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

定义和用法

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>

 

JS 之 innerHTML

标签:

原文地址:http://www.cnblogs.com/jokerjason/p/5742514.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!