How to add div within td with jquery?

Answer 1

The main jQuery function you need is html(): http://api.jquery.com/html/ (or possibly append(): http://api.jquery.com/append/).

To set the contents of an element with id 'myelement' to the html string mystring:

jQuery('#myelement').html(mystring);

This can be used to dynamically create some html and then insert it into the webpage. The problem that remains is to get the selector right (in my example the selector is '#myelement').

It's not clear from your question what the best selector would be. You could work your way from the system div downwards:

jQuery('#system table tr td.td-main').html(...);

but this might not uniquely identify the td in question. You could start by selecting the image by matching on the src and then navigate the tree to get where you want to be.

One more thing to note is that html() can also be used to return the current contents of an element. You may want to use a construction like:

jQuery(myselector).html(jQuery(myselector).html() + myhtml);

to edit some existing html.

Answer 2

The problem I see here is that your html is not formatted very well (I understand - worked with old CMSes before...) which makes jQuery DOM manipulation power almost worthless. You need to start messing about with strings and jQuery is too clever for that.

tttppp has the right of it I think but I've added some string manipulation which hopefully will point you in the right direction.

$(document).ready(function() {
   $('.td-main').each(function(){
     var splitter1 = 'Pris:';
     var splitter2 = '(Inkl. mva)';
     htmlString = $(this).html().split(splitter1);
     htmlString = htmlString[0] + '<div class=\'priceBox\'>' + splitter1 + htmlString[1];
     htmlString = htmlString.split(splitter2)
     htmlString = htmlString[0] + splitter2 + '</div>' + htmlString[1];
     $(this).html(htmlString);
   });
});​​

mmm, gooey deliciousness isn't it? I'm guessing that you might have multiple items on one page, hence the .each() statement. All this code does is gets the html as a string, splits it up, adds the requisite text and spits it out again. I've done no checks before the code runs which you probably need to think about.