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

在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（“新警报”）

的操作，它会删除span（图标）部分。如果我使用

$（'p'）.text（“新警报”）

，也会发生同样的情况

---

你知道我该怎么做吗？

使用jQuery特殊选择器

：not（）

使用jQuery特殊选择器

：not（）

你可以使用一个内部的div元素并在上面添加文本

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

---

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

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

试试这个

HTML

试试这个

HTML

---

您可以更改html结构，但如果不想更改，请尝试以下方法：

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

---

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

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

---

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