javascript - 一个关于append（）的问题，为什么不是按顺序添加？

Question

为什么出来的效果是先加了part1 part2 再加变量？

Answer 1

根据jquery的API。
append()方法的参数只能是三种：

1. html字符串。形如问题中的part1这些的html字符串。

2. element。即dom元素。

3. jquery。即jquery元素。

题主没有很好地明白这个方法的用途，而是把它当做了字符串拼接函数。

第一步append操作时，因为HTML不会允许没有闭合的标签，所以这里jquery会帮你自动闭合, 生成下面这样的结构

<article><h1></h1></article>

第二步执行,会在最后加上一个数值,我们假设是1

<article><h1></h1></article>1

第三步的参数不合理, jquery不会予以解析, 所以不会有执行结果。

最终展示的结果就像是先执行了1,3再执行2一样。

其实是第一步就执行了期望中的1,3操作，实际上3根本没执行。

所以对于这个问题，根据题主的使用方法来推测, 这里用字符串拼接是最方便的办法。

var h = '<arcitle class="post"><h1>'+localStorage.getItem("at"+i) +'</h1></article>';
$('#all').append(h)

Answer 2

为什么不这样呢？

var h = <arcitle class="post"><h1>'+localStorage.getItem("at"+i) +'</h1></article>';
        
$('#all').append(h)

Answer 3

可能是因为异步执行？

Answer 4

2楼正解。append是目的为添加元素、dom节点的操作，而不是拼接字符串。。楼主理解错了

Answer 5

固定的part1和part2放到循环外，拼接后一次append

function load_ret(){
    var part1 = '<article class="post"><h1>';
    var part2 = '</h1></article>';
    var i = 1;
    while(localStorage.getItem("at"+i)){
        $('#all').append(part1+localStorage.getItem("at"+i)+part2);
        i++;
        localStorage.counter=i;
    }
}