Jquery change html structure dynamically

Question

I have a html structure like -

<div class="fullcalendar-event"> 
<h3 class="title"><a href="isv-events/test-event">Test Event</a></h3>

Now i want to change this html on page load to

<div class="fullcalendar-event">
<span class="qtip-link">
<span class="qtip-tooltip">
Header to appear in tooltip 
</span> 
<h3 class="title">
<a href="/saasmax/trunk/isv-events/test-event">Text to appear in tooltip</a></h3>
</span>

Any ideas regarding what jQuery functions I should be using and approach to this problem?

Edited question

The complete data is of following format-

<div class="fullcalendar-event"> 
      <h3 class="title"><a href="/saasmax/trunk/isv-events/test-event">Test Event</a></h3> 
      <div class="fullcalendar-instance"> 
      <a href="/saasmax/trunk/isv-events/test-event" field="field_e_date" allDay="1" start="2011-04-25" end="2011-04-25" index="0" eid="184" entity_type="node" cn="fc-event-default isv_events node-type-isv_events" title="Test Event" class="fullcalendar-event-details" editable=""><span class="date-display-single">Mon, 04/25/2011</span></a>    </div> 
    </div>

so if you see i want to set the qtip on the first of the anchor tags(which is inside the div fullcalender.

All the data that i need need to is that

Header to appear in tooltip should be the title of the anchor in the div fullcalendar-instance.

The Text to appear in tooltip can be the link in the anchor tags.(which is same in both div's)

Where do you get the data from? I mean the data for the new elements. Is it constant? — kapa
– kapa, Commented Apr 26, 2011 at 6:18
content of the new data is dynamic..i will edit my question to tell you the exact data that needs to be fetched.. — ayush
– ayush, Commented Apr 26, 2011 at 6:54
First try the code I have given in my answer. Try to change it to your specific needs. If you still have problems, I am happy to help. — kapa
– kapa, Commented Apr 26, 2011 at 7:01

kapa · Accepted Answer · 2011-04-26 09:14:30Z

1

I have edited my answer according to your updates. I don't say I completely understand you, but this code should do the job.

$(document).ready(function() {
    //access to whole div
    var $fe=$('.fullcalendar-event');
    //access to H3
    var $fe_title=$('h3.title', $fe);
    //creating qtip-tooltip SPAN
    var $tooltip_span=$('<span class="qtip-tooltip" />')
                          .text($('.fullcalendar-instance a', $fe).attr('title'));
    //wrapping H3 in SPAN and adding tooltip before it
    $fe_title
        .wrap('<span class="qtip-link" />')
        .before($tooltip_span);

    /* I am unsure if you want to change HREF, uncomment if yes
    //access to the link in the H3
    var $fe_title_link=$('a', $fe_title);
    //creating new HREF
    var newhref='/saasmax/trunk/'+$fe_title_link.attr('href');
    //setting HREF for link
    $fe_title_link.attr('href', newhref);
    */
});

I have also created a jsFiddle, so you can see it happening and tweak it if necessary.

edited Apr 26, 2011 at 9:14

answered Apr 26, 2011 at 6:23

kapa

78.9k21 gold badges166 silver badges178 bronze badges

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

2 Comments

ayush Over a year ago

can you have a look at the edited question and suggest how to set those heading's and data dynamically.

kapa Over a year ago

@ayush Please try it and if needed, clarify what you want.

Collectives™ on Stack Overflow

Jquery change html structure dynamically

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related