改变DIV的文本，而不改变其内层标签内容

Question

In this plunk我有一个div包含一些文本和span，也有文字。

我的目标是更改div的文字，而不更改span的文字。

我试着用jQuery，但问题是整个div文本更改，也取代span文本，任何想法？

HTML

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div> 

的Javascript：

$(document).ready(function() { 
    var id1 = $("#id1"); 
    id1.text("New Text"); 
}); 

Answer 1

这是罕见的地方的jQuery不会为你做很多之一。你想直接去Text节点在div：

$(document).ready(function() { 
 
    var id1 = $("#id1"); 
 
    // The [0] accesses the raw HTMLDivElement inside the jQuery object 
 
    // (this isn't accessing internals, it's documented). 
 
    // The `firstChild` is the first node within the `div`, which is 
 
    // the text node you want to change. `nodeValue` is the text of the 
 
    // Text node. 
 
    id1[0].firstChild.nodeValue = "New Text"; 
 
});

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

使用或不使用jQuery的（比ready等）都：

$(document).ready(function() { 
 
    var id1 = document.getElementById("id1"); 
 
    id1.firstChild.nodeValue = "New Text"; 
 
});

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 2

请有厕所处的K这种方法：

$(document).ready(function() { 
 
    
 
    $("#id1").contents().get(0).nodeValue = "New Text 1 " 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="id1">some text to change <span>THIS TEXT STAYS</span></div>

Answer 3

使用outerHTML：

$('#id1').html("New Text "+$('#id1 span')[0].outerHTML)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="id1">some text to change <span>THIS TEXT STAYS</span></div>

Answer 4

HTML： -

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div> 

jQuery的： -

$(document).ready(function() { 
    var abcd = $('span').text(); 
    $("#id1").html("New Text "+'<span>'+abcd+'</span>'); 
}); 

我们可以重建整个需要DOM通过获取跨度踏歌文本（）

请检查更新 Fiddle

Answer 5

试试这个代码，

var id = document.getElementById('id1'); 
 
var newText = id.childNodes[0]; 
 
newText.nodeValue = 'Replaced by me ';

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div>

Answer 6

我知道你已经接受了答案，但我想通了多样性的缘故，我可以告诉你一个jQuery解决方案：

HTML

<div id="id1"> 
    some text to change <span style='color:red;font-weight:bold;'>THIS TEXT STAYS</span> 
</div> 

的jQuery 1.12.4

var $id1 = $('#id1'); 
var $span = $id1.find('span'); 
$id1.text('New Text'); // or $id1.html('New Text'); // your choice 
$id1.append($span); 

---

这可能不是最有效的解决方案，但它可以完成工作。