What could cause addEventListener to execute successfully, but not work in DOMContentLoaded?

(Edit: solved for the most part. Something wonky w/ a legacy theme's code)

TLDR: adding event listener to anchor's click works in jQuery's ready and the later-executed Window's load, but not in Document's DOMContentLoaded, despite compiling and running smoothly. Any explanation for why/how this happens?

I have some code like this:

<a id="add-btn" role="button">Add</a>

I wanted to dynamically attach a click event to it in a separate JS script tag.

<script>
    $(document).ready(() => {
        let btn = document.getElementById("add-btn");
        btn.addEventListener("click", ev => {
            console.log("'Add' clicked!");
        });
        console.log("initialized!");
    });
</script>

This runs perfectly as expected. However, I don't want my code to rely on jQuery. So, naturally, I googled the suggested alternative, and swapped to DOMContentLoaded:

document.addEventListener("DOMContentLoaded", () => {
    // Rest of code
});

Now it compiles, runs, and even continues to log "initialized!" as expected, BUT it does not actually attach the event listener to the anchor element. If I change it to Window's load event, it works (my short-term workaround), but I still don't understand why DOMContentLoaded didn't do the job since everything I read online says it should handle it. It's not like the anchor element hasn't loaded yet, and plenty of other "interactive" readystate stuff works, so why doesn't this?

Is there some rule or documentation someone could point me to for an explanation? Thanks.