Quiero escribir una declaración lógica if else dentro de los literales de la plantilla de javascript. Estoy agregando código html a través de innerHTML y, según alguna lógica, cambio html a algo diferente a otra cosa. Tenga en cuenta aquí que este es un código de ejemplo y el código real podría ser diferente o más grande
const main = document.getElementById('main'); const btn = document.getElementById('btn'); let x = 5; btn.addEventListener('click', () => { main.innerHTML = ` <h2>First</h2> ${if(x > 3) { return ( `<h1>Its graeater also</h1>` ) }} `; }) <div id="main"> </div> <button id="btn"> Click </button>Lo haría usando el operador Condicional (ternario) así.
${x > 3 ? '<h1>It's greater than 3</h1>' : '<h1>It's less than 3</h1>'}https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Puede usar el operador ternario o el operador && Así:
main.innerHTML = ` <h2>First</h2> ${x>3?'<h1>Its greater also</h1>':""} `;o
main.innerHTML = ` <h2>First</h2> ${x>3&&'<h1>Its greater also</h1>'} `; const main = document.getElementById('main'); const btn = document.getElementById('btn'); let x = 4; btn.addEventListener('click', () => { //main.innerHTML = ` //<h2>First</h2> //${x>3?'<h1>Its greater also</h1>':""} //`; main.innerHTML = ` <h2>First</h2> ${x>3&&'<h1>Its greater also</h1>'} `; }) <div id="main"> </div> <button id="btn"> Click </button>