Question

在以下来自jquery UI的示例中，我们有一个警告框：

<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>

我希望能够编辑警报文本而不删除处理警报图标的部分...而且无需在javascript中编写所有小部件html。

如果我执行$('p').html("new alert")之类的操作，则会删除范围（图标）部分。如果我使用$('p').text("new alert")，也会发生同样的情况。

知道我该怎么做吗？

Answer 1

您可以使用内部div元素并将文本放在

上

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

Answer 2

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

Answer 3

你可能更改你的html结构，但如果你不想这样做，试试这个：

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

http://jsfiddle.net/tRMyq/

Answer 4

使用jQuery特殊选择器:not()

如何在不删除span的情况下更改html段落内容？

4 个答案: