如何在h3标签中查询内容

Question

I am using the following jQuery code to try to get the text inside the element and add it to my variable:

   <script>
    var title = $('h3').html();
    alert(title);
   </script>

However, my browser is alerting me 'undefined' instead of the value inside the tag. Any idea what I am doing wrong?

Here is the html section for reference:

    <article>
      <div class="row">
        <div class="columns large-6 large-centered medium-8 medium-centered small-12">
          <h3>This is the post title</h3>
          <h4>written by <b>Myself</b></h4>
          <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia urna sit amet convallis dictum. Curabitur non sodales orci. Praesent vel gravida felis. Cras ultricies velit mi, eget efficitur ipsum tempus nec.</p>
          </section>
        </div>
      </div>
    </article>

Thanks,

Answer 1

This is the solution using plain JavaScript; you don't actually need jQuery here.

var h3element = document.getElementsByTagName("h3")[0];

This returns an array of all h3 elements in the document, of which you'll take the 0th index. Then, simply access the innerHTML property:

var h3content = h3element.innerHTML;

A complete solution would look something like:

<script>
    var title = document.getElementsByTagName("h3")[0].innerHTML;
    alert(title);
</script>

Answer 2

Try to wait for your document to trigger the ready event, if your code is beyond your tag, for example in the header. And if you only need the text, use the text function in jQuery.

<script>
  $(function() {
    var title = $('h3').text();
    alert(title);
  });
</script>

Answer 3

做类似的事情：

alert(document.getElementsByTagName('h3')[0].innerHTML)