Перенос строки в коде

Question

Есть код

let elemmenuitemli = document.querySelectorAll('.fa');
let sidemenu = document.querySelector('#sidemenu');

elemmenuitemli.addEventListener("onmouseenter", checkitem);
elemmenuitemli.addEventListener("onmouseleave", checkitem);


function checkitem() {
    if sidemenu.classList.contains("active")
    {
        /* Удаление меню ul*/
        sidemenu.innerHTML='
        /* Сворачивание меню ul */
          <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
  </li>
  </li>
  ';

    }
    else {
        /* Удаление меню ul*/
        sidemenu.innerHTML="<li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
    <a href="" class="nestedblock">Техника для кухни</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
    <a href="" class="nestedblock">Бытовая техника для дома</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
    <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>    
  </li>
  <li>
    <div class="leftside">
    <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
    <a href="" class="nestedblock">Комплектующие</a>
    </div>
    <div class="rightside">
    <i class="fa fa-home"></i>
    </div>    
  </li>
  </li>";
        sidemenu.classList.add('active');
        /* Разворачивание меню ul */
    }
}

Каким образом в ветви else значение свойства sidemenu.innerHTML - строку можно записать в одну строку?

Answer 1

Я вижу, что у вас проблема в том, что двойные кавычки находятся в двойных кавычках. Либо внутри используйте одинарные (или экранирование: обратный слэш), либо всю конструкцию оберните в одинарные.

Подход, который получше:

Если вам надо вывести форматированный html, а в кавычках это невозможно сделать, то используйте шаблонные строки:

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Template_literals

https://learn.javascript.ru/es-string

Они позволяют и вставлять переменные внутрь, а также сохраняют форматирование html в таком виде, в котором написаны:

let html = `
<div>
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
    </ul>
</div>`;

console.log(html);

БЛОГ НА HUSL

Перенос строки в коде

Ответы (1 шт):