CODEWITHSUNDEEP
javascriptjquery
James Freeberg
James Freeberg

Reputation: 581

How Do I Replace/Change The Heading Text Inside <h3></h3>, Using jquery?

How do I change/replace the <h3> text: "Featured Offers" using javascript to say "Public Offers" instead?

</div>  <!-- FEATURED OFFERS -->
<div class="panel">
   <div class="head">
      <h3>Featured Offers</h3>
   </div>
   <div class="body">
      <table>
         <thead>
            <tr>

Upvotes: 57

Views: 211470

Answers (10)

mohamed hassan
mohamed hassan

Reputation: 17

If you're using JQuery, you could use the following snippet

onSomethingChange() {
  $("#your_element_id").text("the text you want to be appeared")
}

This is if you change your HTML element depending on some event, and the string inside text method could be replaced with another element value like the following snippet

onSomethingChange() {
  $("#your_element_id").text($("#your_other_element_id").val())
}

But remember this works when you put id to your HTML elements, that will not be used as field like inputs

Upvotes: 0

Abdallah
Abdallah

Reputation: 89

Hope that help someone:-

Element with a class attribute with the value of "className":

<h3 class="className"></h3>

You will make a refernce of by the class name:

const newTitle = document.querySelector(".className");

Then change the content:

newTitle.textContent = "New Title";

Upvotes: -1

Deepak kumar Saini
Deepak kumar Saini

Reputation: 29

jQuery(document).ready(function(){
   jQuery(".head h3").html('Public Offers');
});

Upvotes: 1

Jie
Jie

Reputation: 427

$("h3").text("context")

Just use method "text()".

The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method. To get the value of a script element, use the .html() method.

http://api.jquery.com/text/

Upvotes: 28

ishanbakshi
ishanbakshi

Reputation: 1965

Give an id to h3 like this:

<h3 id="headertag">Featured Offers</h3>

and in the javascript function do this : 

document.getElementById("headertag").innerHTML = "Public Offers";

Upvotes: 19

Shades88
Shades88

Reputation: 8360

You can try:

var headingDiv       = document.getElementById("head");
headingDiv.innerHTML = "<H3>Public Offers</H3>";

Upvotes: 0

Chamika Sandamal
Chamika Sandamal

Reputation: 24302

try this,

$(".head h3").html("New header");

or 

$(".head h3").text("New header");

remember class selectors returns all the matching elements.

Upvotes: 13

Sergio Tulentsev
Sergio Tulentsev

Reputation: 230286

If you can select it, you can manipulate it.

Try this:

$(".head h3").html("your new header");

But as others mentioned, you probably want head div to have an id.

Upvotes: 47

barak ben horin
barak ben horin

Reputation: 534

you don't - not like this. give an id to your tag , lets say it looks like this now :

<h3 id="myHeader"></h3>

then set the value like that :

myHeader.innerText = "public offers";

Upvotes: 42

talnicolas
talnicolas

Reputation: 14053

Something like:

$(".head h3").html("Public offers");

Upvotes: 10

Related Questions