Repeating/Cloning DOM elements with HTML and CSS only

Question

Given an HTML template with the following structure:

<div id="user-a">
    <span class="entry-1"></span>
    <span class="entry-2"></span>
    <span class="entry-3"></span>
    <span class="entry-4"></span>
    <span class="entry-5"></span>
    <span class="entry-6"></span>
</div>
<div id="user-b">
    <span class="entry-1"></span>
    <span class="entry-2"></span>
    <span class="entry-3"></span>
    <span class="entry-4"></span>
    <span class="entry-5"></span>
    <span class="entry-6"></span>
</div>
<div id="user-c">
    <span class="entry-1"></span>
    <span class="entry-2"></span>
    <span class="entry-3"></span>
    <span class="entry-4"></span>
    <span class="entry-5"></span>
    <span class="entry-6"></span>
</div>

etc, is there any way to generate the child < span > elements in HTML without manually adding them for each user? I will not have access to Javascript or PHP in this environment, only a basic HTML form and an inline style sheet.

What data needs to be in the elements? And how do you get that data in there? — Nico Shultz, Dec 07 '20 at 15:21
Does this answer your question? [Insert HTML from CSS](https://stackoverflow.com/questions/4879719/insert-html-from-css) — Michel, Dec 07 '20 at 15:21
@NicoShultz the elements can be empty. Right now the user data (really just the ID) is added manually. — user2009300, Dec 07 '20 at 15:28
@Michel Inserting content with a psuedo-element is something I've attempted, but I'm not sure how I'd include all of the entries within a single :after element. There doesn't seem to be a working :after(n) implementation currently. — user2009300, Dec 07 '20 at 15:33

Repeating/Cloning DOM elements with HTML and CSS only

0 Answers0