Javascript 输出缓冲区以错误的顺序放置事物答案

【问题标题】：Javascript output buffer places things in the wrong orderJavascript 输出缓冲区以错误的顺序放置事物
【发布时间】：2012-03-19 20:31:53
【问题描述】：

我的常规 javascript 代码似乎错误地或以错误的顺序将内容输出到页面，这很奇怪，因为代码非常简单（可能是 20 行顶部）。我的代码如下。注意：

pttr_data.length 将返回 150
clean_array.length 将返回 4。
output 是一个 div 对象，即 var output = document.getElementById("results");

我希望我的代码输出如下：

<div>matcha matchb matchc matchn </div>

但它反而返回：

<div/>matcha matchb matchc match

这是我的代码，我在其中放置了随机字符以找出内容的去向（您会在 div 周围看到 ;;;, |||, [[[, }}}）：

var len = pttr_data.length;
for (var i = 0; i < len; i++) {
    var clean_array = pttr_data[i].match(RegExp(rexp.value, flags.value));
    output.innerHTML += ";;;<div>|||";
    var lengthy = clean_array.length;
    for (var j = 1; j < lengthy; j++) {
        if( clean_array[j] ) { output.innerHTML += clean_array[j] + ' '; }
        else { output.innerHTML += 'NULL '; }
    }
    out.innerHTML += "[[[</div>}}}\n";
}

此代码返回：

;;;<div>|||</div>matcha matchb matchc [[[}}}

有人可以解释为什么会这样吗？ javascript for 循环是否独立运行（因此以不同的速度完成），即使它们是嵌套的？但这毫无意义，为什么有人会设计这样的脚本语言？
我的代码怎么能输出 <div/>blah 而不是 <div>blah</div> ？

谢谢

【问题讨论】：

标签： javascript arrays for-loop innerhtml

【解决方案1】：

.innerHTML 属性比您可以附加到的字符串要复杂一些。如果您将"<div>" 附加到它（或在您的示例中为";;;<div>|||"），浏览器不会等待查看您最终是否会提供关闭</div> 标签，它只会立即创建一个div。然后附加更多文本："matcha", "matchb", etc。最后你附加一个关闭的</div>，浏览器会忽略它，因为它没有等待它，但它保留了"[[[}}}"。

不要随时追加到.innerHTML，而是追加到字符串变量，然后在末尾设置.innerHTML等于该字符串。

如果你想附加clean_array 的所有元素，用空格分隔，你甚至不需要for 循环，你可以使用.join()：

output.innerHTML = "<div>" + clean_array.join(" ") + "</div>";
// or for all from index 1
output.innerHTML = "<div>" + clean_array.slice(1).join(" ") + "</div>";

但要保持嵌套的 for 循环：

var len = pttr_data.length,
    outputStr = "";  // use a string variable

for (var i = 0; i < len; i++) {
    var clean_array = pttr_data[i].match(RegExp(rexp.value, flags.value));
    outputStr += ";;;<div>|||";
    var lengthy = clean_array.length;
    for (var j = 1; j < lengthy; j++) {
        // I think ternary conditional is neater than if/else
        outputStr += clean_array[j] ? clean_array[j] + ' ' : 'NULL ';
    }
    outputStr += "[[[</div>}}}\n";
}

output.innerHTML += outputStr;

【讨论】：