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

I have created dynamically using Javascript, as they are not recognized as a part of 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>