树形列表

来源：互联网发布：苹果提示无法加入网络编辑：程序博客网时间：2024/09/21 06:36

<!DOCTYPE HTML><html><head>    <title>树形列表的展开与收缩</title>    <meta charset="utf-8" />    <style>        div{float:left; height: 100px; line-height: 100px; }        #d1,#d3{ background-color: #ccff00; }        #d2{ cursor: pointer; background-color: #ffcc00; }   </style>    <script>        function toggle(d2){            //分别用: innerHTML 和 textContent            //如果d2的内容为?            if(d2.textContent=="<<"){                d1.style.display="none";//隐藏d1                d2.textContent=">>";            }else{//否则                d1.style.display="block";//显示d1                d2.textContent="<<";            }        }    </script></head><body><div id="d1">树形列表</div><div id="d2" onclick="toggle(this)"><<</div><div id="d3">内容的主体</div></body></html>

这里需要注意的是：

innerHTML、innerText与textContent的区别

innerHTML:获取的是整个节点内的所有内容，包含了HTML标签

innerText:获取的是整个节点内的所有去除HTML标签的文字内容，它返回的文本回过滤掉空格，换行和回车键；

textContent：与innerText类似，只是它返回的文本是包含了空格，换行和回车键的；

看例子：

<div id='myBlog'>     <span>我的博客</span></div>

document.getElementById('myBlog').innerHTML获取的是：<span>我的博客</span>

document.getElementById('myBlog').innerText获取的是：我的博客

document.getElementById('myBlog').textContent获取的是：我的博客这里有换行的哦

0 0