使用Javascript三元运算符将CSS类添加到HTML

问题描述

我需要从css类.checkmark或.stem添加一个选中标记图像，但是不知道如何添加它。
我尝试了不同的解决方案，但只收到错误消息，或者仅收到string。图像复选标记应添加到三元运算符上，并在其上显示checkmark。

import {
    myArray
} from './theData.js';

function addcheckmark() {
    let checkmark = document.getElementsByClassName(".checkmark");
    let stem = document.getElementsByClassName(".stem");
    checkmark.appendChild(stem)
}

buildTable(myArray);

function buildTable(data) {
    for (var i = 0; i < data.length; i++) {
        let row = `<tr>
    <td>${data[i].gameNumber}</td>
    <td>${data[i].teams["1"].name} -VS- ${data[i].teams["2"].name}</td>
    <td>${data[i].outcome === "1" ? "checkmark":  ""}</td>
    <td>${data[i].outcome === "X" ? "checkmark" : ""}</td>
    <td>${data[i].outcome === "2" ? "checkmark" : ""}</td>

    </tr>`
        table.innerHTML += row;
    }
}

解决方法

此行存在一些问题：

let checkmark = document.getElementsByClassName(".checkmark");

它应该是“ checkmark”，而不是“ .checkmark”，因为那是类名。
getElementsByClassName是一个集合（类似于数组），应这样处理。
对于从未更改的值，请使用const而不是let。

此代码为所有项目添加了一个选中标记：

function addCheckmark() {
  const checkmarks = document.querySelectorAll('.checkmark');
  const stem = document.querySelector('.stem');
  checkmarks.forEach(checkmark => checkmark.appendChild(stem));
}

您得到的答案可能无法解决问题，因为您的问题不清楚。

conditional-operator javascript