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