JavaScript

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 中，但是发生的是 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;

Answer 2

    var div = document.getElementById("userNumbers");
    var append = "<div class='numbers'>"
    for (i = 0; i < 81; i++) {
        if (i < 10) {
            append += "<div class='nums'>First if:" + i + "</div>";
        }else{
            append += "<div class='nums'>Second if" + i + "</div>";
        }
    }
    append += "</div>";
    div.innerHTML = append;

Answer 3

一些很好的答案，但如果您想创建元素而不是将其写成 innerHTML，这里有一个快速运行的答案。

创建： document.createElement('ElementType') 元素类型可以是任何 html 元素 div,p,span,img

属性： .setAttribute('Attribute', 'Property'); 属性可以是任何 html 属性。示例：id、class、onclick

追加： .appendChild() 不言自明

var Target= document.getElementById('Container');
var NewElement= document.createElement('div');
NewElement.setAttribute('id', 'Content');
NewElement.setAttribute('class', 'Something');
NewElement.setAttribute('onclick', 'MyFunction();');
Target.appendChild(NewElement);

回答你的问题

function Numbers(){
var numbersdiv = document.getElementById('userNumbers');
// If Div Element Numbers Does not Exist Build It
if(!document.getElementById('numbers')){
var numberselement = document.createElement('div');
    numberselement.setAttribute('id', 'numbers');
    numberselement.setAttribute('class', 'numbers');
    numbersdiv.appendChild(numberselement);
}
var InsertTo=document.getElementById('numbers');
for (n = 1; n < 81; n++) {
// Why the if condition? Both true/false have the same output
if (n < 10) {
    //etc
var Nums = document.createElement('div');
    Nums.setAttribute('class', 'nums');
    Nums.innerHTML='<p>' + n + '</p>';
    InsertTo.appendChild(Nums);
}else{
    //etc
var Nums = document.createElement('div');
    Nums.setAttribute('class', 'nums');
    Nums.innerHTML='<p>' + n + '</p>';
    InsertTo.appendChild(Nums);
}}}

<button onclick="Numbers()">Create Elements</button>
<div id="userNumbers"></div>

有什么问题请在下方留言，我会尽快回复。

希望对您有所帮助。编码愉快！

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

JavaScript - Dynamic div tag closes automatically before insertion of HTML

html

arrays

conditional-statements