Question

The following is created dynamically (Yes, it is an old CMS, I’m afraid).

<div id="system">   

    <FORM ACTION="command.asp" METHOD="get" NAME="artForm">

    <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
     <TR>
      <TD VALIGN="top">
        <H1>Sunbean</H1> bla bla bal
      </TD>
      <TD>
    &nbsp;&nbsp;&nbsp;&nbsp;
      </TD>
      <TD VALIGN="top" CLASS="td-main">
     <P ALIGN="center">
     <IMG SRC="http://www.mywebsite.com/images/articles/10013%5F1%2Ejpg" BORDER="0" ALT="Sunbeam Kald Katode, 30cm, Gr&#248;nn">
      </P>        
     <BR>
     <BR>

          Pris:                
         <FONT CLASS="font-pris-uextra">29,00</FONT> (Inkl. mva)<BR>
     <TABLE CELLSPACING="0" BORDER="0" CELLPADDING="2">
                 <TR>
                  <TD>
....
...

I’d like to add div tag with pricebox around Pris as following code.

<div id="pricebox">
 Pris:
  <FONT CLASS="font-pris-uextra">29,00</FONT> (Inkl. mva)<BR>
</div>

I am not sure how to add div tag to this situation. Pris and (Inkl. mva) will be always created, but 29,00 will changed depends on product.

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.