更改<h2>中的文本而不更改相同h2标记的范围

Question

我想在不更改范围的情况下更改文本。 我尝试了这个，文本被更改，但跨度已被删除。

 <div class="c1"> <h2> "here" <span class="span1">X</span></h2></div>

有没有办法在不使用jQuery对span内容进行任何更改的情况下更改文本。

Answer 1

jsFiddle：https://jsfiddle.net/CanvasCode/y6p6xzfx/

$(function () {
    $span = $('h2').find('span')
    $('h2').text("Hello");
    $('h2').append($span);
});

获取跨度的副本，更新h2文本，然后将跨度追加到h2标记。

忘记按c1 div类进行过滤。这是更新的代码

jsFiddle https://jsfiddle.net/CanvasCode/y6p6xzfx/1/

$(function () {
    $div = $('.c1');
    $h2 = $div.find('h2');
    $span = $h2.find('span')
    $h2.text("Hello");
    $h2.append($span);
});

此外，您不需要存储所有元素。我这样做是为了让代码更清晰易读和理解。

Answer 2

更新第一个nodeValue的{​​{1}}。

1. querySelector() - 获取dom对象
2. firstChild - 获取firstNode，在这种情况下我们可以获取textNode
3. nodeValue - 更新textNode内容
＆＃13;
＆＃13;
textNode
＆＃13;
document.querySelector('.c1 h2').firstChild.nodeValue = 'hi'
＆＃13;
＆＃13;
＆＃13;

更新或者在jQuery中使用 contents() 和 replaceWith()

＆＃13;
＆＃13;
<div class="c1">
  <h2>here<span class="span1">X</span></h2>
</div>
＆＃13;
$('.c1 h2').contents().first().replaceWith('hi');
＆＃13;
＆＃13;
＆＃13;

Answer 3

您可以通过再次将span添加到h2元素来实现此目的：

var $span = $("div.c1 span.span1");
$("div.c1 h2").text("New Text");
$("div.c1 h2").append($span);

http://jsfiddle.net/6e8gw7d2/10/

Answer 4

解决方案：$（'。span1'）。text（'ABC'）;