SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Manipulate divs with jQuery

    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?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant. Thanks a lot.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •