の.text（）は、私は、次のマークアップ持っているH1

Question

内のHTML要素に影響します。私は何をしたいか

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

を、私はそのテキストを変更するには、H1をダブルクリックしたときです。 は、これを行うために、私はしかし、文書レディ機能

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

}) 

だけではなく、それはglyphiconスパンを削除H1のテキストを変更する、このコード内で次のコードを書きました。 アイデアはなぜですか？ のマークアップを変更することはできません。

Answer 1

$(this).text()（.html()が正しい構文です）を使用すると、その内部のグリフを含むh1のコンテンツ全体が変更されます。

あなたは（スパン）グリフを維持したい場合は、そのようh1からそれらを区切る：

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

か、をあなたが要求したとして - マークアップを変更せず：

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

Answer 2

Uをh1要素内に別のスパンを追加し、その後

<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

次のことができますSPANのDOM要素とそれに続くnodeValueの前の兄弟を得るためにNode.previousSiblingを設定することができます。

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

あなたは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 5

.text()指定されたテキストを持つ要素の内容を置き換えます。 アイコンのスパンは要素の内側にあるため、置き換えられます。
テキストノードを直接ターゲティングし、そのテキストを置き換えることができます。

this.firstChild.nodeValue = newTitle;