CODEWITHSUNDEEP
jquery
techlead
techlead

Reputation: 779

jQuery: Appending an element to dynamically generated elements

I have the following dynamically generated HTML - I see this html code in firebug but not when I right click and view page source

     <table id="list2" class="ui-jqgrid-btable" cellspacing="0" cellpadding="0" border="0" tabindex="1" role="grid" aria-multiselectable="true" aria-labelledby="gbox_list2" style="width: 1405px;">

<tr id="1" class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1">
<td aria-describedby="list2_action" title="" style="text-align:center;" role="gridcell">
    <img height="22" width="22" alt="Edit" title="Edit" style="vertical-align:middle" src="images/action_icon.gif">
        </td>
</tr>
<tr id="2" class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1">
<td aria-describedby="list2_action" title="" style="text-align:center;" role="gridcell">
    <img height="22" width="22" alt="Edit" title="Edit" style="vertical-align:middle" src="images/action_icon.gif">
        </td>
</tr>
</table>

Taking the above code, I want to dynamically add a div element after the img element such that every table row has the following code

<td aria-describedby="list2_action" title="" style="text-align:center;" role="gridcell">
    <img height="22" width="22" alt="Edit" title="Edit" style="vertical-align:middle" src="images/action_icon.gif">
<div>test</div>
        </td>

I've tried .append(), .add(), .insertAfter() but nothing works.

Pls help! Is there a way to use .live() without an event handler?

This is also not working and it's at the bottom right before the body end tag.

$(document).ready(function(){
    $("img[alt='Edit']").after("<div style='background-color:yellow;'>test</div>");

});

Upvotes: 1

Views: 2327

Answers (2)

GregL
GregL

Reputation: 38121

Since you said you can't touch the original code that dynamically creates the markup, it seems like you would be best to "monkey patch" the original code to modify it so that after it runs as normal, it also calls your code to append the divs.

It's not ideal, but since you cannot use .live() to bind to when certain types of elements get created, it's probably your best bet.

See my jsFiddle for a working example using almost your exact markup: http://jsfiddle.net/greglockwood/9xmqE/

The crux of it is this Javascript:

// assume that this is the code you cannot touch that dynamically adds the rows:

function existingAddDynamicRows() {
    // ... omitted for brevity ...
}

// now, in our code, we want to "monkey patch" the old code's function so that we can call our own code after it

// first we store a ref to the existing function
var oldAddDynamicRows = existingAddDynamicRows;
// next, we redefine what the function does to also run our own code
existingAddDynamicRows = function() {
    oldAddDynamicRows(); // call the existing code to add the rows
    // now we can run our own code, like adding the <div>s in
    $('#list2 td img').after('<div>test</div>');
};

// now whenever that existing function gets run, it will also run our code as well
// e.g.
existingAddDynamicRows();

Let me know if you have any questions. The particular way you monkey-patch it might be different depending on how the existing code is structured.

Upvotes: 1

mu is too short
mu is too short

Reputation: 434665

You want to use after:

Insert content, specified by the parameter, after each element in the set of matched elements.

Something like:

$('td img').after('<div>test</div>');

Demo: http://jsfiddle.net/ambiguous/Lt6ku/

You may need to adjust the td img selector to match your HTML of course.

Upvotes: 2

Related Questions