Если мне нужно создать пару вложенных элементов DOM, я знаю один способ сделать это - написать их как длинную строку, а затем поместить их в документ с помощью подходящей функции jQuery. Что-то вроде:

elem.html(
'<div class="wrapper">
    <div class="inner">
        <span>Some text<span>
    </div>
    <div class="inner">
        <span>Other text<span>
    </div>
</div>'); 

Этот путь явно не самый чистый. Жало не занимает много времени, чтобы запутаться, и редактирование становится проблемой. Я гораздо больше предпочитаю эту запись:

$('<div></div>', {
    class : 'inner'
})
.appendTo( elem );

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

По сути, вопрос в том, что является лучшим способом создания вложенных элементов HTML на лету, без необходимости разбираться с запутанными длинными строками?

Note : I am aware of templating engines. However this is a question concerning the creation of just a couple of HTML elements on the fly. Like while building the DOM dependencies for a plugin or similar cases.