.text() wirkt sich HTML-Elemente innerhalb h1

Question

Ich habe folgendes Markup:

<h1>A text <span class="createTask glyphicon glyphicon-plus"></span></h1> 

Was ich tun möchte, ist, wenn ich ein h1 Doppelklick auf den Text zu ändern. Um dies zu tun, schrieb ich den folgenden Code in einem Dokument bereit Funktion

$("h1").on("dblclick",function(){ 
    var newTitle = prompt("Enter a new title"); 
    if(newTitle){ 
    $(this).text(newTitle); 
    } 

}) 

jedoch diesen Code, anstatt nur den Text des h1 ändert es die glyphicon Spanne entfernt. Irgendwelche Ideen warum? Auch Beachten Sie, dass ich das Markup nicht ändern kann.

Answer 1

Mit $(this).text() (.html() ist die richtige Syntax), Sie ändern den gesamten Inhalt h1, einschließlich der Glyphe darin.

Wenn Sie die Glyphe (mit der Spannweite) behalten möchten, trennen sie von der h1 etwa so:

<h1>A text </h1><span class="createTask glyphicon glyphicon-plus"></span> 

Oder wie gewünscht - ohne das Markup zu ändern:

$(this).html(newTitle + "<span class='createTask glyphicon glyphicon-plus'>"); 

Answer 2

Fügen Sie eine weitere Spanne innerhalb des h1 Element und dann

<h1> 
    <span id="text">A text </span> 
    <span class="createTask glyphicon glyphicon-plus"></span> 
</h1> 

$("h1").on("dblclick",function() { 
    var newTitle = prompt("Enter a new title"); 
    if (newTitle){ 
     $(this).find('#text').text(newTitle); 
    } 

}) 

Answer 3

Sie können u Se Node.previousSibling, um vorheriges Geschwister von SPAN DOM Element zu erhalten und dann sein nodeValue kann eingestellt werden.

$("h1").on("dblclick", function() { 
 
    var newTitle = prompt("Enter a new title"); 
 
    if (newTitle) { 
 
    var span = $(this).find('span').get(0); //get the DOM element 
 
    span.previousSibling.nodeValue = newTitle; 
 
    } 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<h1>A text <span class="createTask glyphicon glyphicon-plus">+++++</span></h1>

Answer 4

Sie müssen den ersten Textknoten innerhalb des h1 aktualisieren: $(this).contents().get(0).nodeValue = newTitle;.

$("h1").on("dblclick", function() { 
 
    var newTitle = prompt("Enter a new title"); 
 
    if (newTitle) { 
 
    $(this).contents().get(0).nodeValue = newTitle; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<h1>A text <span class="createTask glyphicon glyphicon-plus"></span></h1>

Answer 5

.text() ersetzt den Inhalt des Elements mit dem angegebenen Text. Da sich der Symbolbereich innerhalb des Elements befindet, wird er ersetzt.
Sie können den Textknoten direkt anvisieren und dessen Text ersetzen.

this.firstChild.nodeValue = newTitle;