如何在javascript中使用id或class選擇動態創建的元素？

Question

試圖弄清楚如何選擇我使用Javascript動態創建的div，因為它們不被視為dom的一部分。 JS的新手，所以任何見解將不勝感激。

function createDiv() {
    count= count+1;
    //creating elements outside - start
    var resultDiv = document.createElement("div");
    resultDiv.className = "result-div";
    var resultDiv2 = document.createElement("div");
    resultDiv2.className = "result-div2";
    //end

    if (count%2 != 0) {
        if(count>2) {
            var xyz = document.querySelector(".result-div2");
            xyz.style.display = "none";
            console.log("click 3");
        }

        var parentDiv = document.getElementById("main-div");
        parentDiv.appendChild(resultDiv);

        resultDiv.style.display = "block";
        document.getElementsByClassName("result-div").style.display= "block";
    } else {
        var parentDiv = document.getElementById("main-div");
        parentDiv.appendChild(resultDiv2);

        console.log("click even");
        document.getElementsByClassName("result-div2").style.display= "block";

        var xyz = document.getElementsByClassName("result-div");
        xyz.style.display = "none";
    }

    console.log(count);
}

Answer 1

我已經使用Javascript動態創建了它們，因為它們不被視為dom的一部分。

不，它們實際上是DOM的一部分。 我猜您是這樣想的，因為新創建的元素中沒有內容。 您可以在新創建的div添加一些文本，以便可以看到。

Document.getElementsByClassName（）

getElementsByClassName()返回類似數組的對象。 您必須使用索引。

 function createDiv(){ var count = 0; count = count+1; //creating elements outside - start var resultDiv = document.createElement("div"); resultDiv.className = "result-div"; resultDiv.textContent = "result-1"; //add text here var resultDiv2 = document.createElement("div"); resultDiv2.className = "result-div2"; resultDiv2.textContent = "result-2"; //add text here //end if (count%2 != 0) { if(count>2){ var xyz = document.querySelector(".result-div2"); xyz.style.display = "none"; console.log("click 3"); } var parentDiv = document.getElementById("main-div"); parentDiv.appendChild(resultDiv); resultDiv.style.display = "block"; document.getElementsByClassName("result-div")[0].style.display= "block"; } else{ console.log(count%2) var parentDiv = document.getElementById("main-div"); parentDiv.appendChild(resultDiv2); console.log("click even"); document.getElementsByClassName("result-div2")[0].style.display= "block"; var xyz = document.getElementsByClassName("result-div")[0]; xyz.style.display = "none"; } console.log(count); } createDiv(); 

 .result-div {color: red} 

 <div id="main-div"></div>