JavaScript - 动态 div 标签在插入 HTML 之前自动关闭

Question

我使用 JavaScript 根据特定条件动态添加 HTML。我想将 HTML 放在一个重复的 div 标签中，该标签在我按下按钮 (onClick) 时创建。

div = document.getElementById('userNumbers');

div.append('<div class="numbers">')
    for (n = 1; n < 81; n++) {
        if (n < 10) {
            //etc
            div.append('<div class="nums"><p>' + n + '</p></div>');

        } else {
            //etc
            div.append('<div class="nums"><p>' + n + '</p></div>'); 
        }
    }
div.append('</div>');

如您所见，我只想将 HTML 包装在一个名为“numbers”的 div 中，但发生的情况是我打开名为 numbers 的 div 会立即关闭。并且 HTML 无法放入其中。我大致了解了为什么会这样。

是否有解决此问题的方法？我试过执行“document.createElement('div')”解决方案，但这会带来一整套其他问题。

长话短说，我只想打开div，根据条件添加代码，然后关闭。

Answer 1

您不能将未关闭的元素附加到 DOM。 DOM 元素是树中的节点，与文件中表示它的 HTML 文本不同。

您应该做的是为 numbers DIV 设置一个变量，并附加到它。

div = $("#userNumbers");
numbers = $('<div class="numbers">').appendTo(div);
for (n = 1; n < 81; n++) {
    if (n < 10) {
        //etc
        numbers.append('<div class="nums"><p>' + n + '</p></div>');

    } else {
        //etc
        numbers.append('<div class="nums"><p>' + n + '</p></div>'); 
    }
}

或者，您可以使用 HTML 字符串进行所有附加操作，然后最后插入该 HTML:

div = document.getElementById('userNumbers');
html = '<div class="numbers">';
for (n = 1; n < 81; n++) {
    if (n < 10) {
        //etc
        html += '<div class="nums"><p>' + n + '</p></div>';

    } else {
        //etc
        html += '<div class="nums"><p>' + n + '</p></div>';
    }
}
div.innerHTML += html;