.text（）影响h1内的html元素

Question

I have the following markup:

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

What I want to do is when I double click an h1 to change its text. To do this I wrote the following code inside a document ready function

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

})

However this code instead of just changing the text of the h1 it removes the glyphicon span. Any Ideas why? Also note that I cannot change the markup .

Answer 1

Using $(this).text() ( .html() is the correct syntax), you are changing the entire h1 content, including the glyph inside it.

If you want to keep the glyph (with the span), seperate them from the h1 like so:

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

Or, as you requested - without changing the markup:

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

Answer 2

You need to update the first text node within the h1 : $(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 3

Add another span inside the h1 element and then

<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 4

You can use Node.previousSibling to get previous sibling of SPAN DOM element and then its nodeValue can be set.

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

.text() replaces the contents of the element with the specified text. Since the icon span is inside the element it will be replaced.
You can target the text node directly and replace its text.

this.firstChild.nodeValue = newTitle;