Ändern von Text in einem div, aber nicht löscht andere Elemente innerhalb dieser div

Question

ich ein div habe, die unten wie folgt aussieht

<div class="registered-count-container"> 
    <div class="registered-count-inner">@(spaceEvent.IsTeacherRegistered ? "Registered" : "Interested"): <span class="badge">@spaceEvent.RegisteredStudentCount/@spaceEvent.MaxClassSize</span></div> 
</div> 

Ich mag Text aus dem div mit der Klasse ändern ‚Einschreibe-count-Innen‘ mit aus der Spanne innerhalb des ‚Einschreibe-count-Container‘ div löschen, aber wenn ich den Text wie diese

$(eventPanel).find(".registered-count-inner").text("Interested"); 

in der alles ändere Es tilgt ‚Einschreibe-count-Innen‘ Klasse einschließlich der Spanne mit der Ausweisklasse. Gibt es eine Möglichkeit, den Text zu ändern, ohne das span-Tag zu löschen?

Answer 1

, dass Text in einer anderen Spanne Setzen und dass nur ändern:

<div class="registered-count-container"> 
    <div class=""> 
     <span class="registered-count-inner">@(spaceEvent.IsTeacherRegistered ? "Registered" : "Interested"):</span> 
     <span class="badge">@spaceEvent.RegisteredStudentCount/@spaceEvent.MaxClassSize</span> 

    </div> 
</div> 

Und dann denselben Code:

$(eventPanel).find(".registered-count-inner").text("Interested"); 

Answer 2

Sie tun können, das Markup ohne Änderung. Verwenden Sie jquery contents() die geordneten Knoten des Elements zugreifen und den Text des ersten Textknoten ersetzen (im Markup) - siehe Demo unter:

$('.registered-count-inner').contents().get(0).nodeValue = 'new text here';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="registered-count-container"> 
 
    <div class="registered-count-inner">@(spaceEvent.IsTeacherRegistered ? "Registered" : "Interested"): <span class="badge">@spaceEvent.RegisteredStudentCount/@spaceEvent.MaxClassSize</span></div> 
 
</div>

Answer 3

da Sie versuchen, zu ersetzen Der Textknoten, der in dir div vorhanden ist, du kannst zuerst dieses Textknotenelement filtern und dann seinen Inhalt ändern.

var eventPanel = ".registered-count-container" 
 

 
var textnode = $(eventPanel).find(".registered-count-inner").contents().filter(function() { 
 
    return this.nodeType === 3; 
 
}); 
 

 
textnode[0].textContent = "Interested"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="registered-count-container"> 
 
    <div class="registered-count-inner">Registered <span class="badge"> I am span</span> 
 
    </div> 
 
</div>

Answer 4

ein flexiblerer Ansatz

$(document).ready(function(){ 
 
    
 
    replaceDivContent('.registered-count-inner', 'Registered', 'Interested'); 
 
}); 
 

 
function replaceDivContent(identifier, from, to){ 
 

 
    var newContent = $(identifier).text().replace(from, to); 
 
    $(identifier).text(newContent); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="registered-count-inner">Registered: <span>Other Text Stuff</span></div>