关于一段文字展开收起所引发的问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1 {width: 400px; background: lightblue; margin: 0 auto;}
</style>
</head>
<body>
<div id="div1">
    说真的这届美国队甜瓜和欧文才是真大腿，每到要分、硬仗的时候没怂过，欧文的特点摆在这里，正是这种特点才让他取得现在的成就，欧文在场上现在出球速度并不慢关键是其他人真的没有什么得分、串联的能力啊，就像我在其他帖子里说的，这只球队不缺得分手，缺少的是一名轴心，组织者，要是保罗、老詹、哈登来其一都可以让进攻流畅起来，总之，这个锅不应该欧文来背。
    <a href="javascript:;">>>收缩</a>
</div>
</body>
<script type="text/javascript">
var oDiv=document.getElementById('div1');
var oA=oDiv.getElementsByTagName('a');
var onOff=true;
var old='';
oA[0].onclick=function()
{
    if(onOff)
    {
        onOff=false;
        old=oDiv.innerHTML;
        oDiv.innerHTML=oDiv.innerHTML.substring(0,20)+'......<a href="javascript:;">>>展开</a>';
    }
    else
    {
        onOff=true;
        oDiv.innerHTML=old;
    }
}
</script>
</html>

各位大神好，代码如上，为何收缩可以生效，但是想再次展开，就无法获取oA这个元素了？
getElementsByTagName不是动态方法么？那为何会有这个错误？

ps:解决方法有了，就是把正文套上一个SPAN标签，避免修改a标签即可，但是我想弄明白出现这个问题的本质原因。求各位不吝赐教，感谢！

你的 oA 是页面加载完获取的，你在 click 事件中重新设置了 innerHTML 所以是一个新的 a 标签了。之前的 oA 对象已经丢失了，你应该把文字和 a 标签分开来，截取文字，把 a 标签的 innerText 改成展开即可。或者你可以在设置完 innerHTML 后重新获取 a 标签赋值给 oA

oA[0].onclick=function move()
{
    if(onOff)
    {
        onOff=false;
        old=oDiv.innerHTML;
        oDiv.innerHTML=oDiv.innerHTML.substring(0,20)+'......<a href="javascript:;">>>展开</a>';
        oA=oDiv.getElementsByTagName('a');
        oA[0].onclick=move;
    }
    else
    {
        onOff=true;
        oDiv.innerHTML=old;
        oA=oDiv.getElementsByTagName('a');
        oA[0].onclick=move;
    }
}


感谢@u3u提供的思路，问题解决方法如下。
进针对这个问题解决，实际写还是分标签操作为好：D

【热门文章】