How to Insert a Field that Pulls H1 Text? - html

Question

Is there a way to insert a field on the post for the H1 of that page? The page has an H1 - I want to put it in the body of the post. I know it's a weird question - and hard to explain.
What I'd like to do is put something on posts, in the html/text part of the editor in the body of the post that pulls the H1 on that page. Not to format it as an H1, but to add the text of the H1 elsewhere in the body of the post.
So for example, in the text editor within my content at the end of a post, I'd have:
"We hope you enjoyed our list of the 10 best [H1 text here]"
Is there something that would do [H1 text here]???
Thank you!

Answer 1

Although html isn't as strict, it's better to use lowercase characters for its elements; H1 ==> h1.
To answer your question you can get text of the h1 element or any element as follows (using jQuery):
//adding jQuery to page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
//getting and appending h1 text
<script>
$(document).ready(function(){
var h1Text = $("h1").text();
// now the text in h1 will be stored in the h1Text variable
// you can use it to append to any element
// append by tag name:
$("span").text(h1Text);
// append by id:
$("#title").text(h1Text);
// append by class:
$(".all-titles").text(h1Text);
});
</script>
Then putting the title in your html:
<div>
We hope you enjoyed our list of the 10 best <span></span>
<!-- or -->
We hope you enjoyed our list of the 10 best <h5 id="title"></h5>
<!-- or -->
We hope you enjoyed our list of the 10 best <span class="all-titles"></span>
</div>

Answer 2

Get the h1 using tag selector... or define an id within the h1 and get it that
way...
$(document).ready(function() {//--> make sure the document is ready
var heading = $('h1').text(); //--> We use the tag selector "h1" and get the text inside using '.text()'
var heading = $('#heading').text(); //--> or use id selector
var div = $('#div'); //--> Get the element to place the value within # -> is for an ID
var span = $('.span'); //--> Get the element to palve the value within . -> is for a class
div.text(heading); //--> placing the variable `heading`s text value inside the text of the declared variable/element `#div`
span.text(heading); //--> placing the variable `heading`s text value inside the text of the declared variable/element `.span`
var p = $('#yes');
p.append(heading); //append or `add to` the variable `p` with the id of "yes" => `#yes`
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="heading">
Yes there is a way
</h1>
<div id="div"></div>
<span class="span"></span>
<!-- Maybe you want to append the H1 to the end of a p tag? -->
<p id="yes">Is there something that would do => </p>