[英]How to select dynamically created elements using id or class in javascript?
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. 试图弄清楚如何选择我使用Javascript动态创建的div,因为它们不被视为dom的一部分。 New to JS so any insights will be appreciated.
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);
}
I have created dynamically using Javascript, as they are not recognized as a part of dom.
我已经使用Javascript动态创建了它们,因为它们不被视为dom的一部分。
No, They are actually as part of the DOM. 不,它们实际上是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. 您可以在新创建的
div
添加一些文本,以便可以看到。
Document.getElementsByClassName() Document.getElementsByClassName()
getElementsByClassName()
returns an array-like object. getElementsByClassName()
返回类似数组的对象。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.