Java脚本显示API在容器中获取的数据

大家好,我是一名学生,正在尝试创建一个使用SpaceX API的JavaScript网页。初始获取请求会创建一张带有任务名称的卡,当点击该卡时,它会显示额外的任务数据。我遇到的问题是,额外的数据显示在卡内任务名称的左侧。我正试图让它显示在任务名称下面。 enter image description here 我的代码 enter image description here 包含数据的容器

我尝试创建单独的容器以获得所需的结果,但它不起作用

function createCard(launch) {
    const article = document.createElement('article');
    article.className = 'card';
    // new div/container so mission name displays above details when card is clicked
    const missionName = document.createElement('p');
    missionName.textContent = launch.mission_name;
    article.appendChild(missionName)

    const missionDetails = document.createElement('div');
    missionDetails.className = 'mission-details';
    article.appendChild(missionDetails)

    return article;
    
}