如何将javascript中的元素应用于html中的多个类名_Javascript_Html

如何将javascript中的元素应用于html中的多个类名

javascript html

如何将javascript中的元素应用于html中的多个类名,javascript,html,Javascript,Html,我试图将h2.appendChild（h2Text）应用于类名为“FlipCardFront”的所有三个元素。我想让h2显示“指控”这个词。为了让事情变得更简单，我只在html中添加了三张卡片，但对于我的项目，我尝试将h2应用到100张卡片上，类名为“flip card front” 指控无名氏建筑师和工程师我们爱那个家伙无名氏建筑师和工程师我们爱那个家伙无名氏建筑师和工程师我们爱那个家伙增加： const cards=document.getElementById（“

我试图将h2.appendChild（h2Text）应用于类名为“FlipCardFront”的所有三个元素。我想让h2显示“指控”这个词。为了让事情变得更简单，我只在html中添加了三张卡片，但对于我的项目，我尝试将h2应用到100张卡片上，类名为“flip card front”


指控
无名氏
建筑师和工程师
我们爱那个家伙
无名氏
建筑师和工程师
我们爱那个家伙
无名氏
建筑师和工程师
我们爱那个家伙

增加：

const cards=document.getElementById（“cards”）；
函数addTitleToCards（）{
for（设i=0；i



卡
无名氏
无名氏
无名氏
我不确定这是否有效，因为您只想将子节点附加到单个节点/元素GetElementsByCassName返回节点列表，而不管是否只有一个节点具有该类名。您通常可以判断名称中是否有元素，它将返回一个列表而不是一个oneTrue，我所建议的是如何向父节点添加元素。我添加了一个简化的代码段，用于将一个元素添加到多张卡中。
window.addEventListener("DOMContentLoaded", function(){
    var h2 = document.createElement("h2");
var h2Text = document.createTextNode("Accusation ");

h2.appendChild(h2Text);
console.log(h2);
    document.body.appendChild(h2);

});


<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <script src="app.js" ></script>

</head> 

<body>
    <div class="flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front">
                <h2>Accusations </h2>
                <img
                    src='https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light' />
            </div>
            <div class="flip-card-back">
                <h1>John Doe</h1>
                <p>Architect & Engineer</p>
                <p>We love that guy</p>
            </div>
        </div>
    </div>

    <div class="flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front">
                <img
                    src='https://avataaars.io/?avatarStyle=Circle&topType=ShortHairTheCaesarSidePart&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light' />

            </div>
            <div class="flip-card-back">
                <h1>John Doe</h1>
                <p>Architect & Engineer</p>
                <p>We love that guy</p>
            </div>
        </div>
    </div>

    <div class="flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front">
                <img
                    src='https://avataaars.io/?avatarStyle=Circle&topType=ShortHairShortFlat&accessoriesType=Kurt&hairColor=BrownDark&facialHairType=BeardMedium&facialHairColor=BrownDark&clotheType=ShirtVNeck&clotheColor=Blue03&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light' />
            </div>
            <div class="flip-card-back">
                <h1>John Doe</h1>
                <p>Architect & Engineer</p>
                <p>We love that guy</p>
            </div>
        </div>
    </div>


const front = document.getElementsByClassName("flip-card-front");
let header = document.createElement("h2");
header.innerHTML = "Accusation";
front.append(header);