js基础之"++"操作符 以及 Dom方法appendChild()

前几天看一个腾讯轮显demo的源码，学到了很多基础知识，现摘取其中的一段代码，来说明一下js常见"i++"和"++i"的用法区别  以及  appendChild()方法。

该demo用js”类“（构造函数）来实图片滑动的时候，对图片的序列按钮进行动态生成并插入到html文档。代码如下：

<ul id="idNum">
    
</ul>

<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
nums=new Array();
for(var i = 0, n = 4; i <= n;){
        (nums[i] = $("idNum").appendChild(document.createElement("li"))).innerHTML = ++i;
        var x=nums[i-1];
}

</script> 

在讲解代码之前，先把其中牵扯到的两个知识点说一下：

（1）关于i++和++i。

相同之处：在于两者都是进行i=i+1的操作。即不管++在前还是在后，i的值都会变成i+1。

比如for循环中：

for(var i=0;i<5;++i){alert(i)}//等同于for(var i=0;i<5;i++){alert(i)}

不同之处：两者的不同之处一般要在具体情况下（一般是为其他变量赋值时）才能体现出来。如下：

var i=0;
var k=i++;
alert(k);//弹出值为0

如果i++改为++i,如下

var i=0;
var k=++i;
alert(k);//弹出值为1

通过例子看，不同之处就很明显了。

var k=i++  相当于  var k=i; i=i+1;

而var k=++i  相当于 i=i+1; var k=i;

即，i++是先执行i所在语句，然后完成+1的操作；而++i则相反，先对i完成+1的操作然后在以i加1以后的值执行所在语句。

又比如：

var num=0;
alert(num++);
/*弹出值为0。
执行顺序为：
alert(num);
num=num+1;
*/

var num=0;
alert(++num);
/*弹出值为1。
执行顺序为：
num=num+1;
alert(num);
*/

因此，++在前还是在后所产生的不同，当存在与++相连的操作时才会比较明显。var++会先执行前面的操作（var值保持原值不变） 然后再对var进行+1的操作，++var则会先对var执行加1的操作 然后再执行对var（此时的var值已经是var+1）的操作。

（2）dom中常用的appendChild()方法。

该方法用于为父节点添加子节点。在这里要说明的主要是：该方法返回的是新增的那个子节点。如下所示：

<div id="myDiv"></div>

<script type="text/javascript">

var myDiv=document.getElementById('myDiv');
var newPar=document.createElement('p');
newPar.innerHTML='这是新添的段落元素';
var x=myDiv.appendChild(newPar);

alert(x.innerHTML);//'这是新添的段落元素'

</script>

 

 

最后，我们再根据这两点基础知识，去读本文中提到的demo源码就会容易一些

for(var i = 0, n = 4; i <= n;){
        (nums[i] = $("idNum").appendChild(document.createElement("li"))).innerHTML = ++i;
        /*
         创建li元素(<li></li>)添入ul中作为其子节点，并将li元素赋值给数组nums中的每一项，然后将每一项（即<li></li>）利用.innerHTML插入相应的值（值为i+1）。
         在这之后，i的值已经变成i+1,然后继续循环直到结束。
        */
}