Wrap HTML around existing elements

Question

This is my normal css to apply :

<h3><strong><span style="color: #3399ff;"></span></strong></h3>

I wish to apply that style above to these js elements:

$('#no_tax_price').text("$"+no_tax_price.toFixed(2));
        $('#tax').text("$"+tax.toFixed(2));
        $('#tax_price').text("$"+(no_tax_price+tax).toFixed(2));

Answer 1

If you define your styles in CSS rather than HTML, your new elements will automatically take on the styling - no JS required.

#no_tax_price, #tax, #tax_price {
    font-size: 18pt;
    font-weight: bold;
    color: #3399ff;
}

Answer 2

Normally I wouldn't use <h3><strong><span> to apply styles (instead just use a single class with the right CSS properties defined), but a quick fix is to just wrap those elements around the contents of your "jQuery elements":

$('#no_tax_price, #tax, #tax_price')
    .wrapInner('<h3><strong><span style="color: #3399ff;"></span></strong></h3>');