Присоединение к DOM после цикла

Question

Я хотел бы знать, как добавить в DOM только один раз после этих вложенных циклов. Также , переменная letters является динамической c, поэтому мне нужно будет «сбросить» мою добавленную сетку, когда новая строка передается в letters

let letters = "abcdefghijkl"

for (let i = 0; i < letters.length; i++) {
  var musicRowID = `${letters.charAt(i)}01`;
  $("#music-grid").append(`<div id="music-row-${musicRowID}" class="row no-gutters"></div>`);

  for (let j = 1; j <= 12; j++) {
    var columnID = letters.charAt(i) + (j < 10 ? "0" : "") + j;
    $(`#music-row-${musicRowID}`).append(
      `<div class="col-1"><button id="${columnID}" class="btn bar song">${columnID.toUpperCase()}</button></div>`
    );
  }
}

Спасибо Заранее!

РЕДАКТИРОВАТЬ

После ответа от TJ Crowder я попытался включить свой код, чтобы иметь возможность заполнять свою сетку из входных данных, но когда я отменяю выбор один из входов, эта строка не очищается.

let letters = 'abcdefghijkl';
let html = "";

$(".list-checkbox-item").change(function() {
  let chosenLetters = $(this).val();
  if ($(this).is(":checked")) {
    arrayOfChoices.push(chosenLetters);
  } else {
    arrayOfChoices.splice($.inArray(chosenLetters, arrayOfChoices), 1);
  }
  letters = arrayOfChoices.sort().join(""); // Gives me a string with chosen letters ordered alphabetically
  console.log(
    `This is my string in var 'letters' ordered alphabetically (Need to clear grid after each instantiation or append after the loop): %c${letters}`,
    "color: red; font-weight: bold; font-size: 16px"
  );

  for (let i = 0; i < letters.length; i++) {
    var musicRowID = `${letters.charAt(i)}01`;
    html += `<div id="music-row-${musicRowID}" class="row no-gutters">`; // *** No `</div>` yet

    for (let j = 1; j <= 12; j++) {
      var columnID = letters.charAt(i) + (j < 10 ? "0" : "") + j;
      html += `<div class="col-1"><button id="${columnID}" class="btn bar song">${columnID.toUpperCase()}</button></div>`;
    }

    html += "</div>";
  }
  $("#music-grid").html(html);
});

Что я делаю не так?

Answer 1

Предполагая, что #music-grid пусто перед первым запуском этого кода, создайте HTML в строке и затем используйте html() для замены содержимого #music-grid вместо добавления на это:

let html = "";
for (let i = 0; i < letters.length; i++) {
  var musicRowID = `${letters.charAt(i)}01`;
  html += `<div id="music-row-${musicRowID}" class="row no-gutters">`; // *** No `</div>` yet

  for (let j = 1; j <= 12; j++) {
    var columnID = letters.charAt(i) + (j < 10 ? "0" : "") + j;
    html +=
      `<div class="col-1"><button id="${columnID}" class="btn bar song">${columnID.toUpperCase()}</button></div>`;
  }

  html += "</div>";
}
$("#music-grid").html(html);

Вы также видите, как люди собирают HTML в массиве и используют array.join("") в конце, чтобы получить единственную строку, но с современными движками JavaScript это действительно ва sh в любом случае ...