Javascript输出缓冲区以错误的顺序放置东西

Question

我的常规JavaScript代码似乎是输出东西到页面不正确或错误的顺序，这很奇怪，因为代码非常简单（也许20行上）。我的代码如下。注意：

• pttr_data.length将返回150
• clean_array.length将返回4.
• output是div对象，即无功输出=的document.getElementById（ “结果”）;

我希望我的代码输出是这样的：

<div>matcha matchb matchc matchn </div> 

而是将其返回：

<div/>matcha matchb matchc match 

这里是我的代码，我在其中放置随机字符，以找出其中的东西（你会看到;;;, |||, [[[, }}}在那里divs）：

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>？

感谢

Answer 1

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

随着您的进行，而不是追加到.innerHTML，追加到字符串变量，然后在末尾设置.innerHTML等于该字符串。

如果要追加用空格分开，你甚至都不需要for循环的clean_array所有元素，你可以使用.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;