• 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>
  • 相关阅读:
    Permutations II
    N-Queens II
    Palindrome Number
    Minimum Path Sum
    JS的DOM操作2
    JS 的DOM操作
    函数概念
    JavaScript数组
    JavaScript循环及练习
    JS语言
  • 原文地址:https://www.cnblogs.com/jokerjason/p/5742514.html
Copyright © 2020-2023  润新知