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

Question

我需要添加来自 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;
    }
}

Answer 1

这行有几个问题：

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

1. 应该是“checkmark”，而不是“.checkmark”，因为那是类名。
2. getElementsByClassName 是一个集合（类似于数组），应该这样对待。
3. 使用const 而不是let 表示永远不会更改的值。

此代码为所有项目添加复选标记：

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

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