这是一个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,更多知识点笔记可以看我的博客