前辈JSdowhile document.getElementById.innerHTML

前辈,前两种输出“0,1,2,3,4”晚辈认同,但第三种不是应该输出“4”吗,为何输出的也是“0,1,2,3,4”??
第一种

 <body>
    <p>点击下面的按钮,只要i小于5就一直循环代码块。</p>
    <button onclick="fun()">请点击这里</button>
    <p id="demo"></p>
    <script>
        function fun()
                    {
                        var x="",i=0;
                        do{
                            x=x+"The number is "+i+".<br />";
                        //  document.getElementById("demo").innerHTML=x;
                            i++;
                        }while(i<5) document.getElementById("demo").innerHTML=x;
                    }
    </script>
</body>

第二种

 <body>
    <p>点击下面的按钮,只要i小于5就一直循环代码块。</p>
    <button onclick="fun()">请点击这里</button>
    <p id="demo"></p>
    <script>
        function fun()
                    {
                        var x="",i=0;
                        do{
                            x=x+"The number is "+i+".<br />";
                        document.getElementById("demo").innerHTML=x;
                            i++;
                        }while(i<5);
                        // document.getElementById("demo").innerHTML=x;
                    }
    </script>
</body>

第三种

 <body>
    <p>点击下面的按钮,只要i小于5就一直循环代码块。</p>
    <button onclick="fun()">请点击这里</button>
    <p id="demo"></p>
    <script>
        function fun()
                    {
                        var x="",i=0;
                        do{
                            x=x+"The number is "+i+".<br />";
                        //  document.getElementById("demo").innerHTML=x;
                            i++;
                        }while(i<5);
                        document.getElementById("demo").innerHTML=x;
                    }
    </script>
</body>

为什么是4呢?你的x变量不是一直累加,然后最后设置demo的innerHTML为x的值

除非第三种是

  x="The number is "+i+".<br />";

认真看下这时,当The number is 4时,此时i=4,但是马上就i++,然后i=5,
下去就判断i<5,所以就直接跳出循环了啊,就只会输出0,1,2,3,4”
建议自己打个断点来看

  do{
                            x=x+"The number is "+i+".<br />";
                        //  document.getElementById("demo").innerHTML=x;
                            i++;
                        }while(i<5);