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

Question

我们如何更改除跨度文本之外的文本数据？

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

h2除了跨度之外，有什么解决方案可以改变吗？

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;
});​​​​​

演示：http: //jsfiddle.net/Vks82/

Answer 2

在 h2 元素的 childNodes 中搜索第一个文本节点。更改文本节点的值。

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";
});​

现场演示

Answer 4

此示例可以帮助您在不更改子元素的情况下更改父元素：

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

这是一个使用小提琴的现场示例

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>