javascript - 如何访问由 forEach 在 Javascript 中创建的元素？

Question

我正在使用 Star Wars API swapi.co，我正在尝试通过以下代码访问电影的 ID，并检查该值是否为 3 或更多，如果是我想添加一个类到显示图标的元素。

我似乎无法获取 ElementById("films")，可能是因为 id 已经用单引号写在 forEach 中。

let div = '<div id="inner-container">';
    data.forEach( function(item) {
        div += 
        '<ul class="item-container">'
        + '<li class="item">' + '<span>' + 'Starship Name: ' + '</span>' + '<br>' + item.name + '</li>' +
        '<li class="item">' + '<span>' + 'Starship Model: ' + '</span>' + '<br>' + item.model + '</li>' +
        '<li id="films" class="item">' + '<span>' + 'Number of Films: ' + '</span>' + item.films.length + '</li>' +
        '</ul>';

    });
    div += '</div>';
    document.getElementById("main-container").innerHTML = div;
});

Answer 1

如果你要渲染 htmlString 不要在字符串文字中连接变量:

"<div class='crappy way'>"+ variable +"</div>"

使用模板文字渲染 htmlString 并插入变量:

`<div class='better way'>${variable}</div>`

// A array to reference the root of SWAPI
const roots = ["Film", "People", "Planet", "Species", "Starship", "Vehicle"];

// A one time addition to DOM
const root = `
  <article class='${roots[4].toLowerCase()}s'>
    <header class='page'>
      <h2>${roots[4]}s</h2>
    </header>
  </article>`;

//Since an example of item wasn't provided, I guessed as to how it was structured. 
const items = [{
  name: "Death Star",
  model: "DS-1 Orbital Battle Station",
  films: ["https://swapi.co/api/films/1/"]
}, {
  name: "TIE Advanced x1",
  model: "Twin Ion Engine Advanced x1",
  films: ["https://swapi.co/api/films/1/"]
}, {
  name: "X-wing",
  model: "T-65 X-wing",
  films: ["https://swapi.co/api/films/2/", "https://swapi.co/api/films/3/", "https://swapi.co/api/films/1/"]
}];

// Reference main
const main = document.querySelector('main');

// Render htmlString root
main.insertAdjacentHTML('beforeend', root);

// Reference the new article tag 
const article = document.querySelector(`.${roots[4].toLowerCase()}s`);

//A Iterate through each object of the items array
//B Get the count of films array
//C1 if the count is more than 2...
//C2 .films should be rendered with an icon
//C3 else htmlString is without icon
//D htmlString for item
//E Render htmlStrings from C2-3 and D

for (let item of items) {//A
  let totalFilms = item.films.length;//B
  let films = totalFilms > 2 ? `<dd class='films'>Film Appearances: ${totalFilms} <i class='fas fa-medal'></i></dd>` : `<dd class='films'>Film Appearances: ${totalFilms}</dd>`;//C1-3

  let ship = `
    <dl class='item'>
      <dt class='name'>Starship Name: ${item.name}</dt>
      <dd class='model'>Starship Model: ${item.model}</dd>
      ${films}
    </dl>
    <hr>`;//D
  article.insertAdjacentHTML('beforeend', ship);//E
}

:root {font: 400 3vw/1.5 'Nova Square'}
dt, dd {
  margin-inline-start: 0px;
  margin-bottom: 4px;
}

<link href="https://fonts.googleapis.com/css?family=Nova+Square&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" crossorigin="anonymous">

<header class='site'>
  <h1>Star Wars</h1>
</header>
<main></main>