Javascript输出缓冲区按错误的顺序放置内容

Javascript output buffer places things in the wrong order

本文关键字：顺序 输出 缓冲区 错误 Javascript      更新时间：2023-09-26

我的常规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>？

感谢

.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;
相关文章：