如何在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>