Как добавить большую часть html кода с помощью js?

Question

[kirillleogky]

Есть большой html код:

<div class="keyboard">
    <div class="row"><div class="key">
          <span class="Backquote on">
            <span class="case down">ё</span>
            <span class="case up">Ё</span>
          </span>
          <span class="Backquote off">
            <span class="case down">`</span>
            <span class="case up">~</span>
          </span>
        </div><div class="key">
          <span class="Digit1 on">
            <span class="case down">1</span>
            <span class="case up">!</span>
          </span>
          <span class="Digit1 off">
            <span class="case down">1</span>
            <span class="case up">!</span>
          </span>
        </div><div class="key">
          <span class="Digit2 on">
            <span class="case down">2</span>
            <span class="case up">"</span>
          </span>
          <span class="Digit2 off">
            <span class="case down">2</span>
            <span class="case up">@</span>
          </span>
        </div><div class="key">
          <span class="Digit3 on">
            <span class="case down">3</span>
            <span class="case up">№</span>
          </span>
          <span class="Digit3 off">
            <span class="case down">3</span>
            <span class="case up">#</span>
          </span>
        </div><div class="key">
          <span class="Digit4 on">
            <span class="case down">4</span>
            <span class="case up">;</span>
          </span>
          <span class="Digit4 off">
            <span class="case down">4</span>
            <span class="case up">$</span>
          </span>
        </div><div class="key">
          <span class="Digit5 on">
            <span class="case down">5</span>
            <span class="case up">%</span>
          </span>
          <span class="Digit5 off">
            <span class="case down">5</span>
            <span class="case up">%</span>
          </span>
        </div><div class="key">
          <span class="Digit6 on">
            <span class="case down">6</span>
            <span class="case up">:</span>
          </span>
          <span class="Digit6 off">
            <span class="case down">6</span>
            <span class="case up">^</span>
          </span>
        </div><div class="key">
          <span class="Digit7 on">
            <span class="case down">7</span>
            <span class="case up">?</span>
          </span>
          <span class="Digit7 off">
            <span class="case down">7</span>
            <span class="case up">&amp;</span>
          </span>
        </div><div class="key">
          <span class="Digit8 on">
            <span class="case down">8</span>
            <span class="case up">*</span>
          </span>
          <span class="Digit8 off">
            <span class="case down">8</span>
            <span class="case up">*</span>
          </span>
        </div><div class="key">
          <span class="Digit9 on">
            <span class="case down">9</span>
            <span class="case up">(</span>
          </span>
          <span class="Digit9 off">
            <span class="case down">9</span>
            <span class="case up">(</span>
          </span>
        </div><div class="key">
          <span class="Digit0 on">
            <span class="case down">0</span>
            <span class="case up">)</span>
          </span>
          <span class="Digit0 off">
            <span class="case down">0</span>
            <span class="case up">)</span>
          </span>
        </div><div class="key">
          <span class="Minus on">
            <span class="case down">-</span>
            <span class="case up">_</span>
          </span>
          <span class="Minus off">
            <span class="case down">-</span>
            <span class="case up">_</span>
          </span>
        </div><div class="key">
          <span class="Equal on">
            <span class="case down">=</span>
            <span class="case up">+</span>
          </span>
          <span class="Equal off">
            <span class="case down">=</span>
            <span class="case up">+</span>
          </span>
        </div><div class="key backspace">
          <span class="Backspace on">
            <span class="case down">Backspace</span>
            <span class="case up">Backspace</span>
          </span>
          <span class="Backspace off">
            <span class="case down">Backspace</span>
            <span class="case up">Backspace</span>
          </span>
        </div>
      </div>

и так далее

Как мне добавить в html с помощью js данный код?

innerHTML? Это получается что весь код напишу в js просто

Подскажите пожалуйста

Answer 1

[0xD34F]

const keys = [
  [
    { on: [ 'ё', 'Ё' ], off: [ '`', '~' ], name: 'Backquote' },
    { on: [ '1', '!' ], off: [ '1', '!' ], name: 'Digit1' },
    ...
  ],
  ...
];


document.querySelector('.keyboard').innerHTML = keys.map(row => `
  <div class="row">${row.map(n => `
    <div class="key">
      <span class="${n.name} on">
        <span class="case down">${n.on[0]}</span>
        <span class="case up">${n.on[1]}</span>
      </span>
      <span class="${n.name} off">
        <span class="case down">${n.off[0]}</span>
        <span class="case up">${n.off[1]}</span>
      </span>
    </div>`).join('')}
  </div>`).join('');

Answer 2

[Антон Неверов]

Зачем вам это?
Можете использовать шаблонизаторы для удобства. Например, очень удобный и простой mustache.js.

Comments

[kirillleogky]

задание такое дали
подскажите как сделать

[Антон Неверов]

Прочитать документацию и повторить.

Answer 3

[Надим]

Если вы напишите весь код в js, то конечный размер страницы не изменится. В такой оптимизации совершенно нет смысла. Вот если бы вы этот html-код подгружали с сервера аяксом, а уже затем вставляли на страницу... то тогда да, в этом был бы смысл.