我使用 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,根据条件添加代码,然后关闭。
最佳答案
您不能将未关闭的元素附加到 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;
关于JavaScript - 动态 div 标签在插入 HTML 之前自动关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29597391/