Question 251926 in Html Question posted in
Some basic documentation can be found here.

Html – How can I display the same block of content two times in a webpage?

I’m coding "Call to Action" buttons for my non-profit website. These are the first thing shown in the homepage. However, I’d like to display them at the end of the page too, after the user finishes reading the sections with more information about the organization, so the buttons show up again without the user having to scroll up again.

Is a way to display that block of buttons twice instead of duplicating the code? Also, do you think displaying them twice is a good idea?

Tags:

2

Answers


  1. 0

    If your page is written in HTML, it is okay to duplicate the code for buttons. If you want to, you could write that markup in a script and add it as innerHTML to cta containers, but I think that would be unnecessary for most cases.

    Login or Signup to reply.
  2. 0

    Yes, it’s a good idea to display them twice. If you want to avoid duplicate code you can use Javascript to clone the first set to create the second set. Use the cloneNode() method to create a copy of the element which contains your buttons, then use the insertAdjacentElement() method to insert the copy into the desired place in your document.

    You can insert the buttons before or after another element, or as the first or last child of another element. (A Stack Snippet always includes a <script> element near the bottom of the <body> element, so I am choosing to insert my copied buttons before that element.)

    const c = document.querySelector('.buttons').cloneNode(true)
const s = document.body.querySelector('script')
s.insertAdjacentElement('beforebegin', c)
    <p class="buttons">
  <button onclick="alert('did this')">Do This</button>
  <button onclick="alert('did that')">Do That</button>
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eros diam, aliquam et rutrum nec, consequat vitae purus. Proin eleifend iaculis purus, nec sollicitudin ex ultrices sit amet. Maecenas vehicula accumsan tempus. Phasellus at ultricies purus, quis pharetra urna. Ut interdum justo ut consectetur tempus. Integer tincidunt, nunc eget consectetur eleifend, ipsum velit porttitor mauris, vitae porttitor eros erat quis metus.
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search