Почему не работает for внутри append?

Question

[Не кидайте в меня камни я только учусь]

<div class="first"></div>
<div class="second"></div>

<!-- С append внутри цикла работает -->
        for (let i = 1; i <= 6; i++) {
            $('.first').append(
                '<p>'+i+'</p>'
            )
        };

    <!-- С циклом внутри append не работает -->
        let hello = 'Hello world!';
        $('.second').append(
            '<p>' + hello + '</p>' +
            for (let i = 1; i <= 6; i++) {
                '<div class="test">' + i + '</div>'
            }
            )

Comments

[WbICHA]

Даже не знаю... Может синтаксис языка изучить стоило для начала?

[Не кидайте в меня камни я только учусь]

Решение-то знаете или просто любитель шутки за 300 выкинуть?

[Dino Winchester]

Не кидайте в меня камни я только учусь, а где вы увидели шутки? Изучайте синтаксис языка, чтобы не было таких глупых вопросов.

Answer 1

[Dino Winchester]

Почему не работает for внутри append?

Потому что это синтаксическая ошибка. Цикл for не будет возвращать подобным образом массив с шестью элементами, которые вы пытаетесь вставить как набор HTML тегов в элемент с классом second.

Чтобы добиться желаемого результата, конкретно в данном случае, вы можете сделать например так:

const getSetOfElements = () => {
     let arr = [];

     for (let i = 1; i <= 6; i++) {
          arr.push(`<div class="test">${i}</div>`);
     }

     return arr;
}

const setOfElements = getSetOfElements();

$('.second').append(`<p>hello</p> ${setOfElements.join("")}`);

Или:

const setOfElements = [...Array(6)].map((_, i) => (`<div class="test">${i + 1}</div>`)).join("");

$('.second').append(`<p>hello</p> ${setOfElements}`);

Чтобы более корректно описать суть вашей ошибки, понадобиться много букв и возможно вам будет не интересно читать, а мне жалко тратить своё время. Поэтому можете пройтись по документации, ознакомиться с синтаксисом языка. Многое сразу встанет на свои места.

Comments

[Не кидайте в меня камни я только учусь]

В общем, не так спросил видимо.

// Из БД выдёргиваются записи
    $.each(data, function (index, data) {

      // И аппендятся к блоку
      $("#articles").append(
        
      // Для каждой записи разметка уже есть
      
      // Дальше идёт такая разметка, с вложениями, классами и рандомизатором, да, можно руками просто написать, но должна быть возможность генерировать?
      <div class="randomizer">
        <div class="randomizer__element"></div>
        <div class="randomizer__element"></div>
        <div class="randomizer__element"></div>
        <div class="randomizer__element"></div>
        <div class="randomizer__element"></div>
        <div class="randomizer__element"></div>
      </div>
      )

[Виталий Першин]

Не кидайте в меня камни я только учусь, Напишите отдельно функцию которая будет возвращать необходимый вам html, вам так проще будет:

$("#articles").append(htmlBuilder(data));

function htmlBuilder(data) {/* Your code */}