javascript - 更改不属于任何标签的 div 元素内的文本

Question

如果我有这样的 div 元素：

<div class="span5">
    <div id="msg" class="alert">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>Hello!</strong> world
    </div>
</div>

并希望只更改msg元素内的文本。如何更改不属于任何标签的文本（在这种情况下world）

我现在正在这样做以更改以下文本<strong>：

$("#clickme").click(function () {
  $("#msg strong").html("Bye");
}); 

我不想包装world任何标签，除非它们不会弄乱任何格式。

Answer 1

span tags, unless you mess them up in CSS, by definition do not apply any formatting. I use them for exactly this purpose quite often.

<div class="span5">
    <div id="msg" class="alert">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>Hello!</strong> <span id="world">world</span>
    </div>
</div>

Answer 2

我不认为你可以这样做，我认为你不应该这样做，我认为选择 DOM 的特定元素比“任何没有任何标签的东西”更好，这很容易在未来。为什么不用跨度或类似的东西包裹它呢？

从w3schools 跨度：

<span> 标签本身不提供视觉变化

Answer 3

span 是一种解决方案。作为替代方案，您还可以遍历 childNodes 并更改最后一个文本节点。（当然我也会推荐 span 方法）。

var allNodes = $("#msg")[0].childNodes;
var textNode = allNodes[allNodes.length-1];
textNode.nodeValue = "bye";