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;