Inserting HTML using JS when no elements have an id

I’m trying to insert HTML code into a page using JS. I need to insert it on a variety of pages for a test, and the first page I coded it for worked great. Here’s the basic code I used:

<script type="text/javascript">
(function() {
               const carousel = document.getElementById('carousel');
               const pointsBar = document.createElement('points-bar');
               const pointsBarHTML = '<div>HTML code goes here</div>';
               pointsBar.innerHTML = pointsBarHTML;
               carousel.parentNode.insertBefore(pointsBar, carousel.nextSibling);
}());
</script>

I have been trying to figure out how to insert the code into the other pages required. The elements on these pages are rarely assigned an id.

My question is… how do I use JS to insert HTML (represented by “HTML code goes here” above) into a page when there aren’t any immediately adjacent or nearby elements that have an id?

Note: I can’t use jquery, only javascript.

Where does the requirement tell you to insert the element? We really do not have enough information to help you.

BTW ‘points-bar’ is not a valid normal HTML element.

I’ve reconstructed the page on either side of where I need the HTML to be inserted and am using placeholder names for classes, etc.

class1 is a unique class on the page and is only assigned to that one specific div.

I understand that points-bar isn’t a valid normal HTML element, but it works on our site and is what I’ve been instructed to use. It doesn’t get in the way of anything on the page I have working.

<div>
<div class="class-a class-b class-c">  
    <div class="class-d class-e class-f class-g">
        <section class="class-h class-i" data-js="data1">
            <div class="class-j">
            <div class="class-k class-l" data-galleryid="galleryx">
                <div class="class-m class-n">
                    <div class="class-o">
                        <div class="class-p class-q">
                            <div class="class-r">
                                <div class="class-s class-t" data-autoplay="false" data-autoplayinterval="0" data-total="1" role="listbox">
                                    <div class="class-u class-v" id="image-0">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                
            </div>
        </section>
    </div>
</div>
</div>

**HTML needs to go here**

<div>
    <div class="class1-unique"></div>
    <section class="class2 class3">
        <div class="class4 class5">
            <div class=" class6">
                <div class="class7 class8 class9">
                    <div>
                       <h1 class="page-title">Page Title Here</h1>
                   </div>
                </div>
            </div>
        </div>
    </section>
</div>

If you know the insert position in relation to other elements (parent/sibling/child) you can just use normal DOM traversal techniques.