如何正确将条件写入innerHTML？答案

【问题标题】：how to write condition into innerHTML correctly?如何正确将条件写入innerHTML？
【发布时间】：2022-10-14 19:25:07
【问题描述】：

此代码不起作用：

el.innerHTML = {
  `<span>title</span>
    ${menuOpened &&
       `<div>
         <span>opened</span>
       </div>`
    }
  `
}

如何正确写？

【问题讨论】：

条件是什么，menuOpened === true？
您正确查看ternary conditional operator，例如：element.innerHTML = (condition) ? 'string for true' : 'string for false'。作为旁注：不应使用innerHTML。它很慢（DOM 需要重新解析）并且存在安全问题（XSS 注入）。

标签： javascript if-statement dom innerhtml

【解决方案1】：

我认为您不能在另一个 ` inside 字符串模板中使用字符串模板。我可能错了，但我会使用其他引号来解决它。

el = {};
menuOpened = true
el.innerHTML =
  `<span>title</span>
    ${menuOpened && '<div><span>opened</span></div>' }
  `;
  
console.log(el)

【讨论】：

【解决方案2】：

好吧，当然您可以在单行模板中执行此操作，但是为了代码的可读性，您可以以经典方式将其拆分为多个步骤，请检查内联 cmets：

// Set your must have html
let html = `<span>title</span>`;

// Pre-set condition for example purpose
const menuOpened = true;

// Expand it if condition is true
if(menuOpened) html += `<div><span>opened</span></div>`;

// Then inner html
// For now we'll just console log it
console.log(html);

但是如果你有更复杂的 html 并且你需要插入数据，而不是像你的情况那样添加它，那么：

// Pre-set condition for example purpose
const menuOpened = true;

// Set code for menu
const menu = menuOpened ? `<div><span>opened</span></div>` : '';

// Set your html template
const html = `<div><span>title</span>${menu}</div>`;

// Then inner html
// For now we'll just console log it
console.log(html);

【讨论】：