Question

我们如何更改除span文本以外的文本数据？

<h2 id="nameUser" >Muhammed <span> mobile :989 531 9991</span></h2>

是否有任何解决方案可以更改h2除了span？

Answer 1

.contents()返回节点集合，包括文本节点。所以在你的情况下，这将起作用：

$('#nameUser').contents()[0].nodeValue = 'Another name';

如果您想获得除SPAN之外的每个节点，请尝试：

$('#nameUser').contents().filter(function() {
    return this.nodeName != 'SPAN';
}).each(function(i) {
    // modify each text node
    this.nodeValue = 'name '+i;
});

DEMO：http://jsfiddle.net/Vks82/

Answer 2

在h2元素的childNodes中搜索第一个textnode。更改textnode的值。

var element = document.getElementById('nameUser');
element.childNodes[0].nodeValue = 'New String';

..应该有用。仅对于此示例，因为第一个子节点是您想要的文本节点，所以您不必搜索它。否则你会.. ..

Answer 3

$('#nameUser').contents().each(function() {
    if (this.nodeType == 3) 
        this.data = "The text you want here";
});

Live DEMO

Answer 4

This示例可以帮助您更改父元素而不更改子元素：

var content= $('#nameUser').children();
$('#nameUser').text('Altered Text').append(content);

Answer 5

你可以通过先保存孩子来实现这一点，这是一个有效的代码。

http://codepen.io/beckje01/pen/sGLot

var h2 = $('#nameUser');
var elmsToSave = h2.children();

h2.empty();
h2.text('bob');
h2.append(elmsToSave);

正如评论中所指出的，这只有在要改变的文本是第一个时才有效。

Answer 6

这不仅适用于span，也适用于您希望文本没有其子文本的任何其他元素。

$("#nameUser")
    .clone()   
    .children()
    .remove()  
    .end()  
    .text();

为了更改文本，我创建了一个简单的jQuery函数：

replaceTextWith = function($element, $replacement){
    $oldText = $element.clone().children().remove().end().text();
    $element.text($element.text().replace($oldText, $replacement));
}

replaceTextWith($("#nameUser"), "Bruno"); //usage

以下是处理fiddle

的实际示例

Answer 7

试试这个......

<h2 id="nameUser" >Muhammed <span id="nameUserSpan"> mobile :989 531 9991</span></h2>

<script>
$(document).ready(function() {
    var inspan= $("#nameUserSpan").html();
    var newuser='New User';
    $("#nameUser").html('');
    $("#nameUser").html(newuser + '<span id="nameUserSpan">' + inspan + '</span>');
});
</script>

如何更改除其跨度之外的文本

7 个答案: