Как добавить два элемента методом append?

Question

[Max Ba]

Недавно прочитал, что добавлять теги таким образом
$("body").appendTo('<div id="text">Текст</div>');
отстойно, непрофессионально и не кроссбраузерно. ОК. Сейчас делаю так:

$('<div>', { id: 'text', text: 'Текст'}).appendTo('body');

Нормально и не сложно, хотя и так и так работает.
Появилась необходимость добавить внутрь тега div еще и тег "A". Мне нужно просто написать такую же конструкцию ниже, после создания дива, или можно как-то сразу всё сделать?
Раньше я собирал конкатенацией нужный мне контент в переменную (хоть целый огромный блок) и добавлял.

Comments

[Сергей Соколов]

«Работает – не трогай!» Каким требованиям не удовлетворяет ваш старый метод со сбором html в переменную?

[Max Ba]

Он меня устраивает. Просто я изучаю Jquery и хочу, чтоб грамматика максимально соответствовала библиотеке.

Answer 1

[Сергей Соколов]

Я бы делал так: назначить строку-темплейт, и в ней заменять отдельные поля:

var tmpl = '<div id="%ID%"><a href="%URL%">%TEXT%</a></div>';

$('body').append(
    tmpl
        .replace(/%ID%/g, id)
        .replace(/%URL%/g, url)
        .replace(/%TEXT%/g, text)
);

Отвечая на ваш вопрос, можно последовательно создавать вложенные html элементы в jQuery:

var div = $('<div>', { id: 'text', text: 'Текст'});
div.append( $('<a>', { href: 'https://ya.ru', text: 'Яндекс'}));
$("body").append(div);