javascript - 为什么 .text().replace() 会删除我的 html？

Question

FIDDLE UPDATED TO CLASSES

<p id="boohoo"><b id="why did all this disappear">Old Text</b></p>    
<p id="boohoo"><h4 id="why did this not work">Old Text</h4></p>

<小时/>

var x = $('#boohoo').text().replace('Old', 'New'); 
function whyNotBold() {
    $('#boohoo').text(x); 
}

为什么 <b> 之间存在差异和<h4> ？我怎样才能拥有前者<b id="...当我插入文本时html不会消失？我想.text().replace(...只会替换文本，不会影响 html，但这里的情况似乎并非如此，因为它正在删除它。

Answer 1

首先你有 2 个具有相同 id 的元素，这是错误的。因此，您的替换仅适用于第一个元素。

第二个是 text() 函数，它会剥离标签并仅返回第一个节点的文本内容，即: Old Text 。当你使用text()函数设置文本时，jquery认为你想要你的节点<p id="boohoo">包含文本ONLY，它使得:

<p id="boohoo">New Text</p>

因为 text() 函数适用于 text nodes

编辑:

就您而言，您可以像这样做您想做的事情:

var x = $('b').text().replace('Old', 'New'); 

function whyNotBold() {
    $('b').text(x); 
    $('h4').text(x); 
}
setTimeout(whyNotBold, 300);

Demo