Question

In the following example from jquery UI, we have an alert box:

<div class="ui-widget">
    <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
        <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
        Alert: something went wrong</p>
    </div>
</div>

I want to be able to edit the alert text without deleting the section which takes care of the alert icon… but also without writing all the widget html inside javascript.

If I do something like $('p').html("new alert"), it removes the span (icon) part. Same happens if I use $('p').text("new alert").

Any idea how I can do this?

Answer 1

Try this out http://jsfiddle.net/euFUL/

HTML

<div class="ui-widget">
    <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
        <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
            <span id="ErrorMsg">Alert: something went wrong</span>
        </p>
    </div>
</div>

JS

$(function () {
    $('#ErrorMsg').text("new alert");
});