Question

Is there a shortcut for:

var child = $('<span>error message</span>');
$('#parent').html(child.html());

or, the same

var child = $('<span>error message</span>');
$('#parent').empty().append(child);

EDIT: above example won’t work if I try to assign same child to multiple parents, my child object can only belong to a single parent (which is not what I wanted in my case).

I do realize I could do:

$('#parent').html('<span>error message</span>');

but I want to reuse child object.
EDIT: again, this won’t work, since child is a DOM object and can only be placed under at most one parent at any time.

I am looking for something like:

var child = $('<span>error message</span>');
$('#parent').content(child);

Answer 1

var child = $('<span>error message</span>').attr({ 'class' : 'error-message'});
$('#parent').html(child.clone()); 

notice that you have to clone() child unless you want to actually move child from its previous parent.

credits to both Tules and Felix Kling