How to repeat early text in the same HTML file using Javascript

Question

I'm looking to create a new page for my articles on my site that replicates the contents of my <h1> tag later in the page.

I wanted to include a small bit of code (I imagined Javascript, but something else will do) - to dyanmically add the Title <h1> of my article in the bottom so it will look something like this:

<h1> This is the title of the article </h1>

 and then at the end of the page:

  Related Articles:

   <p> If you enjoyed reading 
         <script>... populatate "This is the title of the article"</script> 
  then why not explore the following similar articles? </p>

I've looked into it and can't seem to see how to do this more than replicating the <title> tag. It's probably really simple but does anyone know how to do this?

quinnirill · Accepted Answer · 2013-07-23 12:04:01Z

1

It would probably be a better idea to duplicate the data when the HTML is generated / written instead of at runtime, but in case that's not possible, wrap the place where you want to copy the text to into an element that you can refer to, for example by id:

<span id="title_copy"></span>

Then, figure out a way to refer to the header you want to copy the text from, for example by ID again:

<h1 id="main_title">This is the title of the article</h1>

Then you can use JS to copy the contents of "main_title" to "title_copy":

document.getElementById('title_copy').innerHTML = document.getElementById('main_title').innerHTML;

answered Jul 23, 2013 at 12:04

quinnirill

8245 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mister Epic · Accepted Answer · 2013-07-23 11:59:29Z

1

If you have code like this:

If you enjoyed reading <span id="populate"></span>

You can write a jQuery snippet like:

$(function(){
    $('#populate').text($('h1').text());
});

answered Jul 23, 2013 at 11:59

Mister Epic

16.8k13 gold badges88 silver badges156 bronze badges

Comments

bzupnick · Accepted Answer · 2013-07-23 12:05:25Z

1

HTML

<h1 id="something"> title </h1>
<h1 id="repeated_title"></h1>

JQUERY

$("#repeated_title").text($("#something").text());

edited Jul 23, 2013 at 12:05

answered Jul 23, 2013 at 11:58

bzupnick

2,8244 gold badges27 silver badges36 bronze badges

Comments

cjds · Accepted Answer · 2013-07-23 12:10:17Z

1

In pure Javascript this is how you would do it (Look Ma, No jQuery)

<h1 id="something"> title </h1>
If you enjoyed reading <span id="populate"></span>

Javascript

<script>
    document.getElementById("populate").innerHTML = document.getElementById("something").innerHTML;
</script>

Probably best to do it server side though.

P.S. You don't have to place the <script> tag there. Anywhere in the document will do, and its mostly done in the <head>

edited Jul 23, 2013 at 12:10

answered Jul 23, 2013 at 12:04

cjds

8,47611 gold badges57 silver badges86 bronze badges

Comments

user1820801 · Accepted Answer · 2013-07-23 12:01:16Z

0

there is many ways to do this, and javascript is not the best one, as you should do this server side.

<h1 id='title'> This is the title of the article </h1>

and then at the end of the page:

Related Articles:

<p> If you enjoyed reading <span id="title2"></span> then why not explore the following similar articles? [/p]
<script>$("#title2").text(#("#title").text);</script>

answered Jul 23, 2013 at 12:01

user1820801

1046 bronze badges

Collectives™ on Stack Overflow

How to repeat early text in the same HTML file using Javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related