CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uijquery-selectors
Sagi Mann
Sagi Mann

Reputation: 3610

how to change html paragraph content without removing span?

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?

Upvotes: 1

Views: 537

Answers (4)

Jan.J
Jan.J

Reputation: 3080

You could rather change your html structure, but in case you don't want to, try this:

var $p = $('p');
$p.find('span').appendTo($p.html('Not an alert anymore'));

http://jsfiddle.net/tRMyq/

Upvotes: 0

Aditya Singh
Aditya Singh

Reputation: 9612

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");
});

Upvotes: 1

Michael Laffargue
Michael Laffargue

Reputation: 10294

You could use an inner div element and put text on that

<div><span></span><div id="innerDiv"></div></div>

Upvotes: 1

kicaj
kicaj

Reputation: 2968

Use jQuery special selector :not()

Upvotes: -1

Related Questions