Как выбрать динамически созданные элементы, используя идентификатор или класс в JavaScript? - PullRequest
Новая
       12

Как выбрать динамически созданные элементы, используя идентификатор или класс в JavaScript?

0 голосов
/ 09 октября 2018

Попытка выяснить, как выбрать div, которые я создал динамически, используя Javascript, так как они не распознаются как часть 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);
}

1 Ответ

0 голосов
/ 09 октября 2018

Я создал динамически с использованием Javascript, поскольку они не распознаются как часть домена.

Нет, на самом деле они являются частью 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>
...