javascript - 使用 javascript 创建嵌套的 div

Question

我已经使用 javascript 成功创建了一个 div，其中填充了从 API 收集的数据。我想获取该数据的一部分(来自 Episode、SeasonxEpisode 等的所有 innerHTML 文本)并将其放入包含的 div 中，以便我可以将其隔离用于 css 样式。

这是我的代码，所有内容都在同一个父级中。还有一张从 API 中提取的图像显示在 episodeDiv 中，但它未包含在此代码片段中，因为它不是问题的一部分。

<script>
let savedResponse;

function clickSeason (seasonNum) {

    const currentSeason = savedResponse['season'+ seasonNum];

    $("#episode-list").html("");

    currentSeason.forEach(function(episode){
        const episodeDiv = document.createElement('div');
        $(episodeDiv).addClass("episodeStyle");

        episodeDiv.innerHTML = 
            "Episode: " + episode.title + '<br />' + '<br />' + 
            "SeasonxEpisode: " + episode.episode + '<br />' + 
            "Original Airdate: " + episode.airdate + '<br />'  + 
            " Stardate: " + episode.stardate + '<br />' + 
            episode.summary;

        $('#episode-list').append(episodeDiv);
</script>

您可以在这里看到完整的项目:http://idesn3535-flamingo.surge.sh/Final/index.html

完整代码在这里:https://github.com/bmaxdesign/idesn3535-flamingo/blob/master/Final/index.html

我尝试了几个版本:

const episodeData = document.createElement('p');
                $(episodeData).addClass("episodeDataStyle");

episodeData.innerHTML = 
                    "Episode: " + episode.title + '<br />' + '<br />' + 
                    "SeasonxEpisode: " + episode.episode + '<br />' + 
                    "Original Airdate: " + episode.airdate + '<br />'  + 
                    " Stardate: " + episode.stardate + '<br />' + 
                    episode.summary;

$("episodeData").appendChild(episodeDiv);

我希望父节点是 episodeDiv，然后我想将 episodeData 嵌套为具有单独 id 的子节点以在 css 中设置样式。不幸的是，我上面的内容实际上使整个 episodeDiv 都没有显示，我认为这意味着我附加的方式存在一些错误。我想我有一些标签混淆或语法错误，或以上所有错误。我试图避免在我的 HTML 页面中留下一个空元素，但我也对这种方法以及如何将文本放置在空 div 中感到困惑。我显然还不了解 DOM 操作。

请确保您的回复包括原因和方式，以及我可以用来更好地理解这一点的任何关键字或链接。授人以渔等等。非常感谢!!

Answer 1

我喜欢用 template literals和 Array.map 实现你想做的事。给猫剥皮的方法有很多种，但本文非常紧凑且可读性强。

// map the episode objects into strings of html
var episodeHTMLArray = currentSeason.map(episode => {
    return `
        <div class='episode'>
            Episode: ${episode.title} <br /> <br />
            SeasonxEpisode: ${episode.episode} <br />
            Original Airdate: ${episode.airdate} <br />
            Stardate: ${episode.stardate}<br />
            ${episode.summary}
        </div>
    `
})

// join the array of html into a plain string
$('#episode-list').html(episodeHTMLArray.join(''))

模板文字是反引号而不是引号，它们可以使用语法 ${varName} 呈现当前范围内的任何变量。 .

此外，我想我应该指出 $("episodeData")正在寻找一个看起来像 <episodeData></episodeData> 的元素.小心选择器。