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