添加的list-item未显示，单引号使用异常相关前端问题咨询

你遇到的报错和列表项不显示的核心原因是JavaScript中普通单/双引号声明的字符串不支持直接跨行书写：
你代码里用单引号包裹的HTML内容拆成了多行，JS解析器会认为第一行末尾的单引号没有配对闭合，直接抛出语法错误，后续代码不会执行，自然不会插入li元素，编辑器的虚线提示就是语法异常的告警。

下面是三种可用的解决方案，优先推荐第一种：

• 方案1：使用ES6模板字符串（反引号`包裹）
  模板字符串原生支持多行书写，也不需要额外转义内容里的双引号，写法最简单：

  <script>
    function addtodo(){
      todolist.innerHTML =  `
      <li class="mdl-list__item">
        <span class="mdl-list__item-primary-content">
        Bryan Cranston
        </span>
      </li>
      `;
    }
  </script>
  

• 方案2：字符串拼接
  如果需要兼容不支持ES6的旧环境，可以把每一行的字符串单独用单引号包裹后用加号拼接：

  <script>
    function addtodo(){
      todolist.innerHTML =  
      '<li class="mdl-list__item">'+
        '<span class="mdl-list__item-primary-content">'+
        'Bryan Cranston'+
        '</span>'+
      '</li>';
    }
  </script>
  

• 方案3：把HTML内容压缩到同一行
  不需要换行的短HTML可以直接写在同一行内，避免跨行问题：

  <script>
    function addtodo(){
      todolist.innerHTML = '<li class="mdl-list__item"><span class="mdl-list__item-primary-content">Bryan Cranston</span></li>';
    }
  </script>
  

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