段落jQueryの内部値を変更

Question

段落、コメント、およびソーステキストの2つの値を変更したいと思いますが、jQueryはコメントを変更するだけでソースは空のままです。私の理解の

<div class="container"> 
<p class="lead custom_bg" id="comment"> updateme! 
    <code id="source"> updateme2!</code> 
</p> 
</div> 

jQueryのAJAX

success: function(response){ 
     $('#comment').text(response['comment']); 
     $('#source').text(response['source']); 
    } 

の.text属性は、その段落内のすべてのテキストを変更するようです。

Answer 1

#commentのtext()を設定すると、その要素内のすべてのHTMLが破棄されるため、実際には#sourceは存在しません。

このように、あなたの代わりにのみ#comment内の最初のテキストノードの値を変更する必要があり、この問題を修正するには：または

var response = { 
 
    comment: 'comment', 
 
    source: 'source' 
 
} 
 

 
$('#comment').contents()[0].nodeValue = response['comment']; 
 
$('#source').text(response['source']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <p class="lead custom_bg" id="comment"> updateme! 
 
    <code id="source"> updateme2!</code> 
 
    </p> 
 
</div>

、あなたはその中のターゲットテキストを折り返すことができますこのような直接標的とすることができる独自のspan、：

var response = { 
 
    comment: 'comment', 
 
    source: 'source' 
 
} 
 

 
$('#comment span').text(response['comment']); 
 
$('#source').text(response['source']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <p class="lead custom_bg" id="comment"> 
 
    <span>updateme!</span> 
 
    <code id="source"> updateme2!</code> 
 
    </p> 
 
</div>

Answer 2

これを使用してください。 2行目に必要な要素を、それを作成

$('#comment').html(response['comment']+'<code id="source"></code>');   
$('#source').html(response['source']); 

編集：の.text（）=> .htmlを（）

Answer 3

テキストを設定すると、HTMLが破壊されますが、そのオプションを格納することです内側のhtml、すなわち#sourceを入力し、テキストを設定してからもう一度追加します。

私は、応答部分をフィラーテキストに置き換えましたので、変数を再追加する必要があります。

var keepMe = $('#source'); 
 
$('#comment').text("hi"); 
 
$('#comment').append(keepMe); 
 
$('#source').text("hi2");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<p class="lead custom_bg" id="comment"> updateme! 
 
    <span id="source"> updateme2!</span> 
 
</p> 
 
</div>