Manipulate divs with jQuery

[johnsmith153]

Can I manipulate a <div> with jQuery?

So if I have:
<div id="the-div">
<div id="div-2">
Text
</div>
</div>

Can I change class names, and add further HTML, e.g. to create this:
<div id="the-div" class="new-class">
<div id="div-2">
Text
</div>
<div id="new-div">
</div>
</div>

Can someone point me in the right direction?

[chris.upjohn]

This is absolutely 100% possible with jQuery and because all the cross browser issues are solved in the library itself we don't need to worry about IE causing us headaces, see the folllowing jsFiddle link as i put together a very simple demo to do the above.

http://jsfiddle.net/chrisupjohn/HccCZ/

Also if you ever get stuck simply visit the jQuery docs page http://docs.jquery.com/Main_Page as it always has the information you need when you get stuck.

[johnsmith153]

Brilliant. Thanks a lot.

[johnsmith153]

Thanks. I can see how to get an element and add and change things. I also notice the 'after' command which could be useful.

But, what about getting all id names inside another div:

<div class="class-name">

<div id="id-name-1">
</div>

<div id="id-name-2">
</div>

</div>

Above returns 'id-name-1' and 'id-name-2' when looking inside a div with the class name 'class-name'.

That sounds like a completely different story. I'm guessing it's possible with jQuery though??

Thanks again for taking the time to write a demo.

[chris.upjohn]

This is another simple concept to create in practice but I do understand if you are new to jQuery in general so forgive me if I begin to sound like a know it all , see the following jsFiddle which again shows you how to achieve the above.

http://jsfiddle.net/chrisupjohn/THR4p/