如何在element.innerHTML中正确使用三元条件运算符？

首先纠正原代码里的一个小错误：你给el.innerHTML赋值时多套了一层大括号，模板字符串可以直接赋值，不需要用大括号包裹。

替换成三元运算符的写法很简单，利用三元条件 ? 真值内容 : 假值内容的语法，把原来的&&逻辑转换成明确的分支：

el.innerHTML = `
  <span>title</span>
  ${menuOpened ? `
    <div>
      <span>opened</span>
    </div>
  ` : ''}
`;

逻辑说明 #

• 当menuOpened为true时，三元运算符返回后面的展开菜单HTML片段，会被插入到模板字符串中；
• 当menuOpened为false时，返回空字符串''，不会渲染任何额外内容，和你原来用&&实现的效果完全一致。

如果后续需要在菜单收起时显示其他内容，只需要把空字符串替换成对应的HTML模板即可，比如：

el.innerHTML = `
  <span>title</span>
  ${menuOpened ? `
    <div>
      <span>opened</span>
    </div>
  ` : `
    <div>
      <span>closed</span>
    </div>
  `}
`;

内容的提问来源于stack exchange，提问作者kamolmachine