使用 javascript 创建嵌套 div

Question

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

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

<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> 的元素。小心你的选择器。

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>