Automatyczne rozbudowywanie kodu poprzez JavaScript

Pisząc kod stron, a szczególnie formularzy często pojawiają się standardowe elementy strony np.

<input type="submit" value="Zatwierdź"/>

Nic wielkiego, ale grafik sobie zażyczył takiego:

<div class="bt_submit">
        <img src="images/bckg_submit_left.png" alt=""/>
        <span>Zatwierdź</span>
        <img src="images/bckg_submit_right.png" alt=""/>
</div>

Nie ma rady. Trzeba tak pisać. Po trzecim razie miałem dość. Bo gdzie jest zasada DRY (Dont Repeat Yurself?).
Wymyśliłem tak: tam gdzie będzie potrzebny przycisk "Zatwierdź" w kodzie strony napiszę:

<div class="bt">Zatwierdź</div>

a do tego napisałem trochę prostego kodu w JavaScripcie.
Korzystam z frameworka jQuery więc by to wyglądało tak:

jQuery(document).ready(function() {
    var bt=jQuery('div.bt');
    makeBtSubmit(bt);
});

function makeBtSubmit(bt) {
    var btText=bt.html();
    var initialBtClassName='bt'; //umowna
    var targetBtClassName='bt_submit'; //umowna, ale posiadająca swój CSS
    bt.removeClass(initialBtClassName);
    bt.addClass(targetBtClassName);
    var imageLeft='<img src="images/bckg_submit_left.png" alt=""/>';
    var imageRight='<img src="images/bckg_submit_right.png" alt=""/>';
    var spanInside='<span>'+btText+'</span>';
    var htmlInside=imageLeft+spanInside+imageRight;
    bt.html(htmlInside);
}

Teraz więc wszędzie gdzie wystapi mój kod

<div class="bt">Zatwierdź</div>

zostanie automatycznie zamieniony na kod wymagany przez grafika.