Как сгенерировать HTML с большим уровнем вложенности тегов?

Question

[cocomuffin]

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

Подскажите, как сгенерировать большой кусок 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
})

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

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

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

Answer 1

[Mikola-BLR]

const someParams = {
	src: 'https://habrastorage.org/r/w32/webt/5a/6c/29/5a6c29ca462dd577778903.png',
  text: 'Lorem ipsum'
};

const someHtml = $(
  '<div>' +
    '<div class="one">' +
      '<div class="two">' +
        '<div class="three">'+
          '<img src="' + someParams.src + '" class="four">'+
          '<span class="five">' + someParams.text + '</span>'+
        '</div>'+
      '</div>'+
    '</div>'+
  '</div>'
);

$("#foo").append(someHtml);

По-моему, второй вариант вполне себе сносный. Лучше, чем куча аппендов.

const someParams = {
	src: 'https://habrastorage.org/r/w32/webt/5a/6c/29/5a6c29ca462dd577778903.png',
  text: 'Lorem ipsum'
};

const someHtml = $(
  `<div>
    <div class="one">
      <div class="two">
        <div class="three">
          <img src="${someParams.src}" class="four">
          <span class="five">${someParams.text}</span>
        </div>
      </div>
    </div>
  </div>`
);

$("#foo").append(someHtml);

jsfiddle.net/f60abhrg