1

Доброго времени суток!

Подскажите, как сгенерировать большой кусок HTML-кода с несколькими уровнями вложенности элементов с помощью jQuery?

Условно: есть JSON, значения из которого надо распихать по HTML-костяку, костяк всегда один, в нем меняются только значения (например, url на картинку в тег или класс для тега в зависимости от значения параметра в жсоне). Писать большую HTML-портянку - вариант, конечно, рабочий, но некрасивый.

HTML вида:

<div>
    <div class="one">
        <div class="two">
             <div class="three">
                <img src="' + JSONPARAM + '" class="four">
                <span class="five">' + JSONPARAM + '</span>
            </div>
            <div class="six">
                <img src='JSONPARAM' class="seven">
                <span class="eight">JSONPARAM</span>
            </div>
        </div>
        <div class="' + (JSONPARAM ? "nine" : "ten") + '">
            ...и тому подобное...
        </div>
    </div>
</div>

Про вариант

const firstElement = $('<div>', {
  class: one,
  append: ...
})

знаю, но, насколько мне известно, он позволяет сделать аппенд внутри себя только один раз и только для одного элемента (например, в такой div уже не вложить и img и span). Ну, по крайней мере, у меня не получилось, такой вариант не работает, как и вариант с перечислением в append нескольких созданных через jQuery элементов.

Расписывать все теги по-одному, конечно, красивей, но сильно дольше, чем писать HTML-портянку... Еще и шанс запутаться там есть :)

Есть ли какой-то вариант написать красиво генерацию всех элементов, но чтобы потом не делать тонну аппендов?

1
  • Я бы посоветовал обратить внимание на JS шаблоны, а еще лучше - на React.js.
    – hindmost
    Commented 25 янв. 2019 в 8:21

1 ответ 1

2

По опыту могу сказать, что быстрее и проще генерировать html-портянку с помощью строки, чем использовать для этого js или jquery:

const json = {
  1: {
    class: 1,
    name: 1
  },
  2: {
    class: 2,
    name: 2
  }
};

const html = [];
for (const key in json) {
  html.push(`<div class="${json[key].class}">${json[key].name}</div>`)
}

$('.wrapper').append(html);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.