если условие в innerhtml

Question

У меня есть следующий код

     function showDetails(confirmed, recovered, deaths) {
  if (recovered == undefined && deaths == undefined) {
    output.innerHTML = `
    <div  class="confirmed">
     <i class="fas fa-head-side-mask"></i> 
  <p> ${confirmed}</p>
    </div>`;
  } else if (recovered == undefined) {
    output.innerHTML = `<div class="confirmed">
     <i class="fas fa-head-side-mask"></i> 
     <p>casi confermati</p>
     <p>${confirmed}</p>
    </div>
    <div  class="deaths">
  <i class="fas fa-cross"></i>
   <p>Deceduti</p>
  <p>${deaths}</p>
    </div>`;
  } else if (deaths == undefined) {
    output.innerHTML = `<div  class="confirmed">
     <i class="fas fa-head-side-mask"></i> 
     <p>casi confermati</p>
     <p>${confirmed}</p>
    </div>
    <div  class="recovered">
  <i class="fas fa-heartbeat"></i>
  <p>Ricoverati</p>
  <p>${recovered}</p>
    </div>`;
  } else {
    output.innerHTML = `
    <div  class="confirmed">
     <i class="fas fa-head-side-mask"></i> 
     <p>Casi confermati</p>
<p>${confirmed}</p>
    </div >
    <div class="recovered">
  <i class="fas fa-heartbeat"></i>
  <p>Ricoverati</p>
<p>${recovered}</p>
    </div>
    <div  class="deaths">
  <i class="fas fa-cross"></i>
  <p>Deceduti</p>
  <p>${deaths}</p>
    </div>`;
  }
}

Я хотел бы попытаться очистить этот код, вставив условия в сам внутренний HTML, но я не могу понять, как это сделать, и прежде всего если это возможно сделать или, возможно, есть лучшие способы сделать это. Вот что я хотел бы сделать, например:

        output.innerHTML = `
            <div  class="confirmed">
             <i class="fas fa-head-side-mask"></i> 
             <p>Casi confermati</p>
        <p>${confirmed}</p>
            </div >
//CONDITION
    if (${recovered} =!undefined ) {
            <div class="recovered">
          <i class="fas fa-heartbeat"></i>
          <p>Ricoverati</p>
        <p>${recovered}</p>
            </div>
    }
//CONDITION
if (${deaths} =!undefined ) {
            <div  class="deaths">
          <i class="fas fa-cross"></i>
          <p>Deceduti</p>
          <p>${deaths}</p>
            </div>`;
          }
}

Можно ли что-то подобное сделать? Извините, если это тривиальный вопрос, но я пытаюсь выучить

Answer 1

Вот как бы я это сделал:

var textToOutput = `
  <div  class="confirmed">
    <i class="fas fa-head-side-mask"></i> 
    <p>Casi confermati</p>
    <p>${confirmed}</p>
  </div >
`;

if (${recovered} =!undefined ) {
  textToOutput += `
    <div class="recovered">
      <i class="fas fa-heartbeat"></i>
      <p>Ricoverati</p>
      <p>${recovered}</p>
    </div>
  `;
}

if (${deaths} =!undefined ) {
  textToOutput += `
    <div  class="deaths">
      <i class="fas fa-cross"></i>
      <p>Deceduti</p>
      <p>${deaths}</p>
    </div>
  `;
}

output.innerHTML = textToOutput;