Question

Hello guys i have a pretty standard div with css and i would like to append to a div that already exists with a given class.
here is my mark up

<div id ="one" class="PortalBox">

     </div>

   <div class="ab_Box1d">
                <div style="width:600px;">
                    <%@ include file="./concur-reports/index.html"%> 
                </div>
    </div> <!--finish ab_box1d-->  


</div>

here is my jquery.

 $(document).ready(function() {
$(".PortalBox").each(function(){
    var ThisCss = $('<div class="ab_Box1a" id="report1" style="width:640px; padding-top:6px;">'+   
            '<div class="ab_Box1b" id="reportchild1"> </div>' +
                '<table class="ab_Box1c" width="100%" border="0"'+
                  'cellspacing="0" cellpadding="0">'+
              '<tr>'+
                  '<td style="text-align:left">Concur Reports</td>'+
              '</tr>'+
          '</table>'
   +
     '</div>' )
     ThisCss.insertAfter('.PortalBox');
   });
});

so basically I’m trying to append the markup in jquery when i stumble upon any div with class “PortalBox” however i need to make a part dynamic wich would basically be a title
this part

 '<td style="text-align:left">my channel</td>'+

need to be dynamic to pick up the title from another HTML attribute withing the div.
can i add a “title” attribute to the div tag with a value and how do i make this possible with jquery? or java-script I’m open to any ideas so alternate solutions.
Thanks in advance.

Answer 1

Put the title in a data-* attribute:

<div data-title="my channel" class="PortalBox"></div>

You can then retrieve it with jQuery:

$('.PortalBox').data('title');

---

Here’s the complete code:

$(document).ready(function() {
    var report = $('<div class="ab_Box1a" style="width:640px; padding-top:6px;">'+   
        '<div class="ab_Box1b" ></div>' +
        '<table class="ab_Box1c" width="100%" border="0"'+
        'cellspacing="0" cellpadding="0">'+
        '<tr>'+
        '<td style="text-align:left">Concur Reports</td>'+
        '</tr>'+
        '</table>'+
        '</div>');

    $(".PortalBox").each(function() {
        report.clone()
            .find('td').text( $(this).data('title') )
            .appendTo(this);
    });
});

Please note that constructing HTML fragments like this is extremely error prone. If you find yourself doing this often, you should look into using a templating system.