jQuery: set a jQuery object as a [html] content

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);

What kind of shortcut? The first example looks as short as it could be to my eyes. — Jon
– Jon, Commented Oct 19, 2011 at 14:57
If you want to reuse the child object then you'll need to keep a reference to it so no, there is no shorter way than you're already doing — Clive
– Clive, Commented Oct 19, 2011 at 14:58
both .empty().append(...) and .html(child.html()) are too verbose (exhibit unnecessary details superfluous to my intentions). Plus .html(child.html()) feels suboptimal (reconstruct-deconstruct HTML) — THX-1138
– THX-1138, Commented Oct 19, 2011 at 14:59
@Felix Kling: what I am trying to do is precisely this: 'set content of an element'. Neither of my examples concisely state that (too much details). If there is not built-in jQuery method for that, I will use empty().append(). — THX-1138
– THX-1138, Commented Oct 19, 2011 at 15:03
using html(content) on an element will simply overwrite anything that was in there in the first place, no need to use empty — Tules
– Tules, Commented Oct 19, 2011 at 15:06

Felix Kling · Accepted Answer · 2011-10-19 15:11:36Z

2

You can always wrap functionality in a plugin:

(function($) {
    $.fn.setContent = function(content) {
        return this.empty().append(content);
    };
}(jQuery));

$('#parent').setContent(child);

Also if you want to reuse an existing jQuery object, you probably have to use .clone() if you want to insert it later somewhere else.

edited Oct 19, 2011 at 15:11

answered Oct 19, 2011 at 15:03

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

THX-1138 Over a year ago

you missed $.each() on this. other than that this would pretty-up my code, but the original question was is there a shortcut not a how can I pretty this up. Valid solution though. +1

Felix Kling Over a year ago

@user93422: Why should I need each?

Tules Over a year ago

"I need to make this code shorter" "you could always write a new plugin!" hmmm. Would that give you a different result than $('#parent').html(child);?

Felix Kling Over a year ago

@Tules: Actually not... but as I was saying, passing a DOM element is not described in the documentation so we don't know whether this is an intended feature or not. One could also argue that setContent is more expressive than html.

THX-1138 Over a year ago

if content is a jquery object (in my example it is a DOM element) thin it is not possible to assign it to multiple parents. I.e. my original examples are correct but invalid. I have to copy my object by using .html() after all.

|

Tules · Accepted Answer · 2011-10-19 15:04:15Z

1

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

is the shortest you are possibly gonna get, how short does it really need to be? lol

answered Oct 19, 2011 at 15:04

Tules

4,9152 gold badges29 silver badges29 bronze badges

5 Comments

THX-1138 Over a year ago

I would prefer to have child pre-built, but a valid solution nevertheless. +1

Tules Over a year ago

in that case ur first example really is the shortest ur gonna get

THX-1138 Over a year ago

see my edits. child as a DOM object can not be reused, for that reason your answer is the correct one. I would replace child = '...' with child = $(...).html() for the convenience of being able to specify attributes using .attr().

THX-1138 Over a year ago

...and I'm wrong again. .html() will give me content of the child DOM element, not an 'outerHtml'. So your solution is pretty much as good as I can get without plugins/extensions.

THX-1138 Over a year ago

using .clone() on the child would allow to reuse a child pre-built as a DOM element.

Community · Accepted Answer · 2017-05-23 12:19:57Z

0

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

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Oct 19, 2011 at 15:42

THX-1138

21.8k28 gold badges102 silver badges168 bronze badges

Comments

Richard Banks · Accepted Answer · 2011-10-19 15:07:26Z

-1

you could try something like

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

Ive not tried it myself. To be honest your first example seems pretty good to me.

edited Oct 19, 2011 at 15:07

answered Oct 19, 2011 at 15:01

Richard Banks

2,9735 gold badges40 silver badges73 bronze badges

1 Comment

Felix Kling Over a year ago

Right... and I'm just saying that your code is not correct. Not trying is not an excuse for posting erroneous code imo, especially when it contains syntax errors.

Collectives™ on Stack Overflow

jQuery: set a jQuery object as a [html] content

4 Answers 4

6 Comments

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related