Ändern Sie inneren Wert in Absatz jQuery

Question

Ich möchte zwei Werte in einem Absatz, den Kommentar und den Quelltext ändern, aber meine jQuery scheint nur den Kommentar zu ändern, und die Quelle ist leer gelassen.

<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']); 
    } 

Von meinem Verständnis des .text Attribut scheint innerhalb dieses Absatzes alle den Text zu ändern.

Answer 1

Das Problem ist, weil durch die Einstellung der text()#comment Sie alle HTML innerhalb dieses Elements zu zerstören, so #source tatsächlich nicht mehr existiert.

Um dieses Problem zu beheben, müssen Sie stattdessen innerhalb #comment nur den Wert des ersten Textknoten ändern, wie folgt aus:

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>

Alternativ können Sie den Zieltext wickeln in seiner eigene span, die direkt ausgerichtet werden können, wie folgt aus:

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

Verwenden Sie dies. Es erstellen Sie das Element in der zweiten Zeile müssen

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

Edited: .text() => .html()

Answer 3

Die HTML zerstört wird, wenn Sie Text festgelegt, so ist eine Option die speichern innere html dh die #source und hänge sie nach dem Setzen des Textes wieder an.

Ich ersetzte Antwortteil mit Fülltext, so dass Sie die Variablen erneut hinzufügen müssen.

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>