Insert a whole element into another element, not just its inner HTML

Question

I'm trying to figure out how to use jQuery to construct HTML as sanely as possible. As far as I can tell, this should produce <div><span>Alice</span></div>, but instead produces <div>[object Object]</div>:

post = $("<div>");
username = $("<span>").html("Alice");
post.append(username);

I've found that replacing the last line with post.append(username.html()) gets me closer to my goal, but it omits the <span> tags if I do it that way. How do I insert a child element with the surrounding tags, and without writing out "<span>" + username + "</span>", which seems like a novice approach to the task?

EDIT: Stupid mistake. The snippet I posted above was excessively simplified; I was really trying to do post.append(username + another_span_element) in my code. Obviously I can't append objects like that. I've changed it to post.append(username); post.append(another_span_element); and now it works fine. Durr!

A "sane" approach, if you are using innerHTML (which is more or less what the *html* method does), is to construct the entire html fragment and insert it in one go. That way the parser is called once and it has a fully formed fragment to work with. Calling it in bits just creates extra overhead. — RobG, Sep 26 '11 at 23:37

score 1 · Accepted Answer · answered Sep 26 '11 at 23:33

1

Works for me: $("<div>").append($("<span>").html("Alice"))[0].outerHTML == "<div><span>Alice</span></div>"

answered Sep 26 '11 at 23:33

Daniel Brockman

18,826
3
29
40

outerHTML only works [in some browsers](http://stackoverflow.com/questions/1700870/how-do-i-do-outerhtml-in-firefox) without custom support – Marshall Sep 26 '11 at 23:37
@Marshall I was using it to demonstrate what the content of the element was; I wasn’t suggesting that `outerHTML` be used for anything. – Daniel Brockman Sep 26 '11 at 23:38
You're right, it does work... my problem was that I was trying to concatenate two `` objects in my code and then append them both at once. I probably shouldn't have assumed that that would work! – ashastral Sep 26 '11 at 23:47

adeneo · Answer 2 · 2011-09-26T23:41:26.217

0

Is there a reason for not doing:

$('<div><span>Alice</span></div>').appendTo('body');

or

var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$(username).appendTo('#user');

or

var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$('#user').html(username);

or

var username = "Alice";
$('<div><span id="user"></span></div>').appendTo('body');
$('#user').text(username);

or any of the other 200 options?

edited Sep 26 '11 at 23:41

answered Sep 26 '11 at 23:35

adeneo

312,895
29
395
388

Mostly because writing the HTML directly as strings doesn't seem 'right' to me. I'd prefer to work with objects and then construct the entire page at the end. Maybe that's a silly reason, but it's how I'm used to writing code. – ashastral Sep 26 '11 at 23:46

score 0 · Answer 3 · answered Sep 26 '11 at 23:37

0

What you're aiming for is done with the text() method:

post = $("<div>");
username = $("<span>").text("Alice");
post.append(username);

Example here.

answered Sep 26 '11 at 23:37

Pat

25,237
6
71
68

Insert a whole element into another element, not just its inner HTML

3 Answers3