js高手帮忙解释下，解释的越详细越好啊！

(function(){
var o = document.getElementById("hutia"); //获取当前页面ID为hutia的元素并保存到变量o中
var s = o.innerHTML; //获取上一步此元素中的HTML代码。（HTML代码是包含样式的，而 innerText只有文字不包含任何样式）
var p = document.createElement("span"); //新建一个span元素，并保存到变量p中。
var n = document.createElement("a"); //新建一个a元素，并保存到变量n中。
p.innerHTML = s.substring(0,10); //设置上面新建的span元素的内容，也就是 我是内容 中包含的内容。其中内容只截取ID为hutia中的前十个字符。
n.innerHTML = s.length > 10 ? "...展开" : ""; //设置上面新建的a元素的内容，也就是 我是内容 中包含的内容。其中条件为：如果span元素包含的字符长度超过10则设置内容为“...展开”，否则设置内容为空
n.href = "###"; //设置上面新建的a元素的属性href（链接地址）为“###”
n.onclick = function(){ //设置上面新建的a元素的单击触发的事件。
if (n.innerHTML == "...展开"){ //如果a元素的内容等于"...展开"
n.innerHTML = "收起"; //设置a元素的内容等于“收起”
p.innerHTML = s; //设置span元素的内容等于s变量中的内容
}else{ //否则
n.innerHTML = "...展开"; //设置a元素的内容等于“展开”
p.innerHTML = s.substring(0,10); //设置span元素的内容等于s变量中的前10个符
}
}
o.innerHTML = ""; //设置ID为hutia的元素的内容为空
o.appendChild(p); //把a元素加入到当前页面（显示出来）
o.appendChild(n); //把span元素加入到当前页面（显示出来）
})();