Changer le texte de div sans changer le contenu de sa balise interne

Question

Dans ce plunk j'ai un div qui contient un peu de texte et un span, également avec le texte.

Mon objectif est de changer le texte de l' div, sans modifier le texte de l' span.

J'ai essayé avec jQuery mais le problème est que l'ensemble de l' div modifications dans le texte, remplacer le span du texte, des idées?

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

C'est l'un des rares endroits jQuery ne fait pas beaucoup pour vous. Vous voulez aller directement à l' Text nœud qu' 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>

Ou sans l'aide de jQuery (autres que ready) à tous:

$( 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

Veuillez jeter un œil à cette approche:

 $( 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

Essayez ce code,

 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 4

Utilisez 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 5

Je sais que vous avez déjà accepté une réponse, mais j'ai pensé, pour des raisons de diversité, que je pouvais vous montrer une solution 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);
 

---

Ce n'est probablement pas la solution la plus efficace mais elle fait le travail.