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>

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>

• javascript
• jquery

Share Improve this question Follow edited Nov 16, 2018 at 14:58 pushkin 10.2k1616 gold badges6161 silver badges107107 bronze badges asked Dec 18, 2011 at 6:33 James FreebergJames Freeberg 58111 gold badge44 silver badges66 bronze badges 3

• I have no access to the HTML code, BTW. – James Freeberg Commented Dec 18, 2011 at 7:19
• And there are other <h3> tags within the document. How do I just switch <h3>Featured Offers</h3> and not the other H3 tags? – James Freeberg Commented Dec 18, 2011 at 7:21
• and are those <h3> tags inside others <div class="head"> ? – talnicolas Commented Dec 18, 2011 at 15:41

Add a comment  | 

10 Answers 10

Sorted by: Reset to default 47

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.

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";

$("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/

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";

try this,

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

or

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

remember class selectors returns all the matching elements.

Something like:

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

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

You can try:

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

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

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";