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

Posted 2023-05-08

【中文标题】如何在不删除跨度的情况下更改 html 段落内容？

【英文标题】：how to change html paragraph content without removing span?

【发布时间】：2013-02-02 14:48:16

【问题描述】：

在 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")，也会发生同样的情况。

知道我该怎么做吗？

【参考方案1】：

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

【参考方案2】：

您可以使用内部 div 元素并在其上放置文本

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

【参考方案3】：

您可以更改您的 html 结构，但如果您不想这样做，请尝试以下操作：

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

http://jsfiddle.net/tRMyq/

【参考方案4】：

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

【讨论】：

这没有用，因为你不能选择纯文本，它必须是有效的 HTML 元素。