How to change the title element text?

Asked

Viewed 2,555 times

7

Follows code:

$(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>
<h2 id="1ano_card_title" class="card-title pricing-card-title">
  R$10,00
  <small class="text-muted">/ 1 ano</small>
</h2>

I’ve tried that way:

$('#1ano_card_title').text('R$20,00');

However small some. How do I change only the value ? Change from 10.00 to 20.00.

jquery html5

6 answers

11


The way you are doing you are overwriting all content, below follows an example by changing only 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>
<h2 id="1ano_card_title" class="card-title pricing-card-title">
  R$10,00
  <small class="text-muted">&nbsp;/ 1 ano</small>
</h2>

9

You can separate the value you want to change by placing inside a <span> and change the <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>

<h2 id="1ano_card_title" class="card-title pricing-card-title">
    <span id="valor">R$10,00</span>
    <small class="text-muted">/ 1 ano</small>
</h2>

8

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 came up with this solution from here.

6

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>
<script src="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>

5

You can store the current content of the element <small> in a variable and after changing the content of <h1> 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>
<h2 id="1ano_card_title" class="card-title pricing-card-title">
    R$10,00
    <small class="text-muted">/ 1 ano</small>
</h2>

1

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());
  });
});

The H1 tag to which the title will be changed receives the id="infoMsg" and the button that will execute the change event receives the id="mudar".

In Jquery the variable "msg" receives a certain value (new text that will replace the old one contained in H1 of id="infoMsg") the button variable will receive the id contained on the button id="mudar".

Lastly, a function that will happen at the moment of clicking on the button where I inform that, id $("#infoMsg") will have your text changed by the value contained in the msg variable msg.val().

Browser other questions tagged jquery html5

You are not signed in. Login or sign up in order to post.