Question

在我的Firebase数据库（基本上是一个javascript对象）中，有一个对象数组，每个对象都需要插入到我的HTML中。

每个Object有3个属性：dbIsNewExercise，dbExerciseName和dbExerciseTime。如果设置了dbIsNewExercise属性，我想插入一些额外的元素。

我尝试创建的HTML看起来像这样：

<section class="card oefening">
  <div class="card-container">
    <div class="oefening-icon"></div>
    <!-- The div.oefening-icon-nieuw only if the dbIsNewExercise property is set to true -->
    <div class="oefening-icon-nieuw"></div>
    <div class="oefening-info">
      <!-- H3 element only if the dbIsNewExercise property is set to true -->
      <h3>Nieuw</h3>
      <h4>- 15 min</h4>
    </div>
    <h2>Ritmisch ademen</h2>
    <div class="open-card-icon"></div>
  </div>
</section>

还有一个id为＆＃34; oefeningen＆＃34;的父元素，所以我可以插入每个HTML块作为#oefeningen的孩子。

但是当我尝试使用以下JavaScript代码时，我得到一个ReferenceError，指出＆＃34; classList未定义＆＃34;。

    // Method to get the last object in a array
    if (!Array.prototype.last){
        Array.prototype.last = function(){
            return this[this.length - 1];
        };
    };

    // The parent element
    var exercises = document.getElementById("oefeningen"),

    // The Object returned by the database it's tested and returns the correct object.
        changedData = snapshot.val(), 

        newSection = document.createElement("section"),
        newAncor = document.createElement("a"),
        newDiv = document.createElement("div"),
        newH2 = document.createElement("h2"),
        newH3 = document.createElement("h3"),
        newH4 = document.createElement("h4");

    var newCard = classList.add("card", "oefening"),
        newCardContainer = classList.add("card-container"),
        newOefeningIcon = classList.add("oefening-icon"),
        newOefeningIconNieuw = classList.add("oefening-icon-nieuw"),
        newOefeningInfoHolder = classList.add("oefening-info"),
        openCardIcon = classList.add("open-card-icon");

    exercises.appendChild(newSection.newCard);
    var card = document.getElementsByClassName('card').last();

    card.appendChild(newDiv.newCardContainer);
    var cardContainer = document.getElementsByClassName('card-container').last();

    cardContainer.appendChild(newDiv.newOefeningIcon);
    if (changedData.dbIsNewExercise == true) {
        cardContainer.appendChild(newDiv.newOefeningIconNieuw);
    }

    cardContainer.appendChild(newDiv.newOefeningInfoHolder);
    var oefeningInfoHolder = document.getElementsByClassName('oefening-info').last();

    if (changedData.dbIsNewExercise == true) {
        oefeningInfoHolder.appendChild(newH3);
        oefeningInfoHolder.appendChild(newH4);
    } else {
        oefeningInfoHolder.appendChild(newH4);
    }
    cardContainer.appendChild(newH2);
    cardContainer.appendChild(openCardIcon);

    newH2.innerHTML = changedData.dbExerciseName;

    if (changedData.dbIsNewExercise == true) {
        newH3.innerHTML = "Nieuw";
        newH4.innerHTML = " - " + changedData.dbExerciseTime + "min";
    } else {
        newH4.innerHTML = changedData.dbExerciseTime + "min";
    }

解决方案

对于任何偶然发现此主题的人来说，解决方案是由@viveksinghggits在评论中提供的。首先创建元素，将类列表添加到它们，然后将它们附加到父元素。

    var oefeningen = document.getElementById("oefeningen"),
        changedData = snapshot.val(),

        newCard = document.createElement("section"),
        newAncor = document.createElement("a"),
        newCardContainer = document.createElement("div"),
        newOefeningIcon = document.createElement("div"),
        newOefeningIconNieuw = document.createElement("div"),
        newOefeningInfo = document.createElement("div"),
        openCardIcon = document.createElement("div"),
        newH2 = document.createElement("h2"),
        newH3 = document.createElement("h3"),
        newH4 = document.createElement("h4");

    newCard.classList.add("card", "oefening");
    newCardContainer.classList.add("card-container");
    newOefeningIcon.classList.add("oefening-icon");
    newOefeningIconNieuw.classList.add("oefening-icon-nieuw");
    newOefeningInfo.classList.add("oefening-info");
    openCardIcon.classList.add("open-card-icon");

    newCard.appendChild(newAncor);
    newAncor.appendChild(newCardContainer);
    newCardContainer.appendChild(newOefeningIcon);
    if (changedData.dbIsNewExercise == true) {
        newCardContainer.appendChild(newOefeningIconNieuw);
    }

    newCardContainer.appendChild(newOefeningInfo);
    if (changedData.dbIsNewExercise == true) {
        newOefeningInfo.appendChild(newH3);
        newOefeningInfo.appendChild(newH4);
    } else {
        newOefeningInfo.appendChild(newH4);
    }
    newCardContainer.appendChild(newH2);
    newCardContainer.appendChild(openCardIcon);

    newH2.innerHTML = changedData.dbExerciseName;

    if (changedData.dbIsNewExercise == true) {
        newH3.innerHTML = "Nieuw";
        newH4.innerHTML = " - " + changedData.dbExerciseTime + "min";
    } else {
        newH4.innerHTML = changedData.dbExerciseTime + "min";
    }

    oefeningen.appendChild(newCard);

Answer 1

classList是一个应该在HTML元素上调用的对象，用于向其添加类。假设我有一个div元素

<div id="newDiv" style="padding:10px; border:1px solid black;">
</div>

我希望在页面加载完成后添加一个“myClass”类，我会写

document.addEventListener('DOMContentLoaded', function (){
  var _divEle = document.getElementById("newDiv");
  _divEle.classList.add("myClass");//_divEle is an element whose ID is newDiv
});

当你在浏览器中打开它时，div将拥有类“myClass”。

使用子类创建一个HTML块 - Javascript

解决方案

1 个答案: