How to select dynamically created elements using id or class in javascript?

Question

Trying to figure out how to select the divs which I have created dynamically using Javascript, as they are not recognised as a part of dom. New to JS so any insights will be appreciated.

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

I have created dynamically using Javascript, as they are not recognized as a part of dom.

No, They are actually as part of the DOM. I guess you are thinking that way because there is no content in the newly created element. You can add some text to the newly created div so that you can see that.

Document.getElementsByClassName()

getElementsByClassName() returns an array-like object. You have to use index.

 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>