使用javascript创建嵌套的div

Question

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

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

<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中。 不幸的是，我上面的内容实际上使整个剧集甚至没有显示，我认为这意味着我的附加方式有一些错误。 我想我有一些标签混淆或语法错误，或上述所有。 我试图避免在我的HTML页面中留下一个空元素，但我也会对这种方法以及如何将文本放在空div中感到困惑。 我显然还没有理解DOM操作。

请确保您的回复包含原因和方式，以及我可以用来更好地理解这一点的任何关键字或链接。 教一个人钓鱼等等。非常感谢你！

Answer 1

我喜欢使用模板文字和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>的元素。 小心你的选择器。

Answer 2

好吧，我在这里写了一些不同的代码，我喜欢手动创建DOM元素而不是编程，我更喜欢jQuery语法 - 而且当你使用jquery时，它应该不是问题：

        function clickSeason (seasonNum) {

                    const currentSeason = savedResponse['season'+ seasonNum];
                /*empty (remove everything from) the epsiode list div*/
                    $("#episode-list").empty();
            /*declare empty !string! variable for loop, where we can store all the 
            generated divs - this div has to be declared above the FOR loop,
            as we dont want to overwrite it each loop, 
            we want to add something to it each loop*/        
            var ep = "";
            /*loop through current season array/JSON*/
                    for(var i = 0; i<currentSeason.epsiode.length; i++){
                    /*every loop, we add this structure to ep variable*/
                   /*generate div id by variables, in this example, the id will be for
                   first season second episode like ep1-2*/
                      ep+= "<div id='ep"+seasonNum+"-"i+"' class='episodeStyle'>";
                      ep+= "Episode: " + currentSeason.episode[i].title + "<br /><br />"; 
                      ep+= "SeasonxEpisode: " + currentSeason.episode[i].episode + "<br />"; 
                      ep+= "Original Airdate: " + currentSeason.episode[i].airdate + "<br />";
                      ep+= " Stardate: " + currentSeason.episode[i].stardate + "<br />"; 
                      ep+= currentSeason.episode[i].summary;
                      ep+= "</div>";

                    }
            /*loop ended, you can now add it to any other dom element you like*/
                        $('#episode-list').append(ep);
                 }

现在有点理论： $('#myElementID').append(something); 将（作为最后一个孩子）附加到具有该ID的确切元素。 $('.myElementCLASS').append(something); 将（作为最后一个子项）附加到给定类的所有元素。 $('div').append(something); 将（作为最后一个孩子）附加到DOM中的所有DIV

你也可以将它与变量结合起来

var elem="myElementID";

$("#"+elem+"1").append(something); 将附加到#myElementID1

Answer 3

如果我不得不使用jQuery进行模板化，我可能会做类似的事情：

currentSeason.forEach(function(episode){

    let myHtml = '<div class="episodeStyle"> "Episode:" ' + episode.title + '<br />' + '<br />' + '"SeasonxEpisode: "' + episode.episode + '<br />' + '"Original Airdate: "' + episode.airdate + '<br />'  + '" Stardate: "' + episode.stardate + '<br />' + episode.summary + '</div>';

    myHtml.appendTo($('#episode-list'));
});

Answer 4

在下面的代码中，我将展示一种实际可行的方式。 希望它有所帮助，因为与oyu想要完成的相比，它是非常准确的

 $(document).ready(function() { function clickSeason() { /*Lets say this is the data you received form your API*/ let season1 = [{ title: 'Episode 1', episode: 1 }, { title: 'Episode 2', episode: 2 }, { title: 'Episode 3', episode: 3 }]; let seasonSelector = $("#season"); //This will Help you select the place where you //are going to load your episodes let divHolder; let mainContent; //We iterate through each element in our object array season1.forEach(function(episode) { //With jquery you can create a div like this. //You also get the jQuery object for that new div. //With this object you can manipulate your new div even further divHolder = $("<div class='episode'></div>"); //You can append data directrly to the div divHolder.append("<h4>" + episode.title + "</h4>"); divHolder.append("<h5>Episode:" + episode.episode + "</h5>"); //You could create new containers and still be able to manipulate the. mainContent = $("<p class='Content'></p>"); //It could be less performant, but I prefer //appending in sections instead of all in strings. mainContent.append("Original Airdate: " + episode.airdate + '<br /><br />'); mainContent.append("Stardate: " + episode.stardate + '<br /><br />'); mainContent.append(episode.summary); //We append our mainContent div to the divholder divHolder.append(mainContent); //We append our divHolder to the Season seasonSelector.append(divHolder); }); } clickSeason(); }); 

 #season { border: 1px solid gray; padding: 10px; } .episode { border: 1px solid gray; min-width: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="season"> </div>