下拉列表innerHTML的作用理解

这是一个h1的一个点击的时间下拉,但是我不理解函数最后面的那个innerHTML 的作用


 <style>
        ul{
            width: 200px;
            font-size: 18px;
            color: aliceblue;
          padding: 0;
        }
        li{
            
              background-color: rgb(195, 93, 93);
               margin-bottom: 2px;
        }
    </style>
</head>
<body>
    <h1 onclick="myfn()">前端课程</h1>
    <div id="kak"></div>
    <script>
        function myfn(){
            var li = ['html','css3','javascript','jquery','canvas']
            var item = '<ul>'
                for(i=0;i<=li.length;i++)
                    item+='<li>'+li[i]+'</li>'
                item+='</ul>'
          kak.innerHTML = item
        }
    </script>

innerHTML是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML,这里用来设置div id="kak"里的内容,item是由ul和li拼接起来的字符串。
所以赋值到innerHTML后,就是把kak里设置成


<ul>
  <li>li</li>
  ......
</ul>

这样的格式,就是下拉菜单了吧

element.innerText
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
这是他们的概念关于这两个的区别,一般运用js改变页面元素内容就用innerHTML,更多知识点笔记可以看我的博客