Dynamically adding a div to another one using jQuery

Question

Suppose I have the following DIV

<div id="myDiv" style="display:none" title=""></div>

I have an ajax call that append HTML markup to this div using

$("#myDiv").html('').html(response);

I would like to append hidden content to the main div before the response content so the result would be

<div id="myDiv" style="display:none" title="">
    //my hidden content
    //here there will be the response HTML markup    
</div>

How can I do it using jQuery code?

Just add another div after your hidden content and add to that? — Klaus Byskov Pedersen
– Klaus Byskov Pedersen, Commented Nov 13, 2010 at 16:21
do you want to have a permanent hidden content and replace each time his following siblings ? — Riccardo Galli
– Riccardo Galli, Commented Nov 13, 2010 at 16:23
With the code I am using I have one child node of myDiv being added. I want to add another child node of myDiv before the one that — Lorenzo
– Lorenzo, Commented Nov 13, 2010 at 16:24
@Riccardo Galli: Yes that one is an alternative that I can follow — Lorenzo
– Lorenzo, Commented Nov 13, 2010 at 16:26

user113716 · Accepted Answer · 2010-11-13 16:22:46Z

5

Since .html() overwrites anyway, there's really no need to do .html('').

This will first set the hidden content, then it will .append() the response.

$("#myDiv").html('<span class="hidden">somehiddencontent</span>')
           .append(response);

CSS

span.hidden { display:none; }

You could also do it in one shot:

$("#myDiv").html('<span class="hidden">somehiddencontent</span>' + response);

If there's any chance that there will be jQuery managed data inside #myDiv, it would be safer to use .empty() before .html().

$("#myDiv").empty()
           .html('<span class="hidden">somehiddencontent</span>' + response);

answered Nov 13, 2010 at 16:22

user113716

323k64 gold badges454 silver badges441 bronze badges

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

1 Comment

Lorenzo Over a year ago

Good. I am going to try it. I am trying to do this just to solve the problem described here: http://stackoverflow.com/questions/4172511/jquery-generic-code can you have a look at it?

Kos · Accepted Answer · 2010-11-13 16:21:09Z

1

$("#myDiv").html('').append(something).append(somethingElse);

or prepend() if you want to do it in the opposite order.

answered Nov 13, 2010 at 16:21

Kos

72.7k28 gold badges174 silver badges239 bronze badges

Collectives™ on Stack Overflow

Dynamically adding a div to another one using jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related