Javascript get the value from an h4 Tag

Question

i am trying to get the value Lotus of the h4 tag from the code below

    <a id="linkSale" class="linkAccess" title="" href="/vp4/Home/Handlers/OperationAccess.ashx?operationid=17285" onclick="javascript:PrepareEventOnLinksAnchor(17285);">

    <h4>Lotus</h4>

    <p class="dateSales">Du <em><strong>mercredi&nbsp;1 mai</strong>&nbsp;9h</em> au <em><strong>dimanche&nbsp;5 mai</strong>&nbsp;6h</em> </p>

    <p class="baseline"></p>

    </a>

to do that i did as follow :

var h=document.getElementById("17285");

var i=h.getElementsByTagName("h4");

which returned the following line :

<h4>Lotus</h4>

what I want is to get the value Lotus converted to a text.

did you looked here: http://stackoverflow.com/questions/5321739/how-can-i-get-the-text-only-no-tags-from-a-html-document — Ivan Chernykh, May 04 '13 at 10:42
BTW: id's must not be numbers only, they have to start with a character at least — Fabian Lauer, May 04 '13 at 10:43

mplungjan · Answer 1 · 2022-03-21T14:39:31.837

Any of these will work - I recommend the last

console.log(
  document.getElementById("linkSale").getElementsByTagName("h4")[0].textContent,
  document.getElementById("linkSale").querySelector("h4").textContent,
  document.querySelector("#linkSale h4").textContent
)

<a id="linkSale" class="linkAccess" title="" href="/vp4/Home/Handlers/OperationAccess.ashx?operationid=17285">
  <h4>Lotus</h4>
  <p class="dateSales">Du <em><strong>mercredi&nbsp;1 mai</strong>&nbsp;9h</em> au <em><strong>dimanche&nbsp;5 mai</strong>&nbsp;6h</em> </p>
  <p class="baseline"></p>
</a>

score 1 · Answer 2 · answered May 04 '13 at 10:52

you can use jQuery for that :

<h4 id="title">Lotus</h4>

to include script on top:

<script>[[jQuery .js File Path]]</script>

On document ready do like this:

$(document).ready(){ 
     var text=$('#title').html();
});

but I would recommend to use id.

score 0 · Answer 3 · answered May 04 '13 at 10:43

0

You can use "innerHTML" in your example.

 var text = h.getElementsByTagName("h4")[0].innerHTML;

Or "innerText"

var text = h.getElementsByTagName("h4")[0].innerText

answered May 04 '13 at 10:43

hr_117

9,589
1
18
23

score -1 · Answer 4 · edited May 04 '13 at 10:49

-1

You can use jQuery for that :

<h4 id="title">Lotus</h4>

to include script on top:

<script>[[jQuery .js File Path]]</script>

On document ready do like this:

$(document).ready(){ 
     var text=$('#title').html();
});

but I would recommend to use id's or classes

edited May 04 '13 at 10:49

ssedano

8,322
9
60
98

answered May 04 '13 at 10:40

user123_456

5,635
26
84
140

I just wanted to cover it all :) maybe he has it in a form..anyway text() should do it – user123_456 May 04 '13 at 10:45

score -1 · Answer 5 · edited May 23 '17 at 11:53

I highly recommend you use jQuery for this type of work. With jQuery, it's pretty easy:

var i = $('h4').text();

However, whenever you can - use the id attribute.

<h4 id="doc_head">Lotus</h4>

Then in JS:

var i = $('#doc_head').text();

If you don't want to use jQuery for some reason - get the text like that (ugly):

var i = h.textContent || h.innerText; // having your DOM object in h

The above should work in both IE and W3C compliant browsers, look here - InnerText alternative in mozilla

Javascript get the value from an h4 Tag

5 Answers5