Follow the code below:
$(document).ready(function() {
$('#1ano_card_title').text('R$20,00');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h2id="1ano_card_title" class="card-title pricing-card-title">
R$10,00
<small class="text-muted">/ 1 ano</small>
</h2>I've tried it this way:
$('#1ano_card_title').text('R$20,00');
But the element small disappears. How do I change only the value? Change from 10.00 to 20.00.
As you are doing you are replacing all the content, here is an example of just changing the first block of text.
$(document).ready(function() {
$('#1ano_card_title').contents().first()[0].textContent='R$20,00';
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h2id="1ano_card_title" class="card-title pricing-card-title">
R$10,00
<small class="text-muted"> / 1 ano</small>
</h2> You can separate the value you want to change by placing within a <span> and changing <span> instead of <h2> :
$('#valor').text('R$20,00');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h2id="1ano_card_title" class="card-title pricing-card-title">
<span id="valor">R$10,00</span>
<small class="text-muted">/ 1 ano</small>
</h2>You can use pure JavaScript to change the value, see:
document.getElementById('1ano_card_title').childNodes[0].nodeValue = "R$20,00";<h2 id="1ano_card_title" class="card-title pricing-card-title">
R$10,00
<small class="text-muted">/ 1 ano</small>
</h2>I've taken this solution from here.
You can add spam within h2
$('.btn').on('click', function(){
console.log('clique')
$('span.valor').text('R$ 20,00');
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<h2 id="ano_card_title" class="card-title pricing-card-title">
<span class='valor'>R$ 10,00</span>
<small class="text-muted">/ 1 ano</small>
</h2>
<button class="btn btn-primary">Alterar</button> You can store the current content of the <small> element in a variable and then change the contents of <h1> by adding the variable.
var ano = $("small")[0];
$('#1ano_card_title').text('R$20,00').append(ano);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h2id="1ano_card_title" class="card-title pricing-card-title">
R$10,00
<small class="text-muted">/ 1 ano</small>
</h2>html ---
< h1 id="infoMsg" >Texto antigo < /h1>
< button id="mudar">Mudar Texto < /button>
jquery ---
$(document).ready(function(){
var msg = $("Texto Novo");
var botao = $("#mudar");
botao.on("click", function(event){
event.preventDefault();
$("#infoMsg").text(msg.val());
});
});