Yup, this is fairly simple to implement. Since yo said you never want to
render HTML (not even display:none), and only render HTML elements to
the DOM after the request is a success, here, you can try my approach
below:Here's what I would do.Take your target HTML elements that you
have in your sightly, and wrap them around with the tag. Using
JavaScript templating literals, store it into a JavaScript variable name
window.example. Include an HTML-id tag on the component, so that you
know where to JavaScript renders HTML elements. In your button code,
after when the Ajax returns success, you can use the global JavaScript
variable window.example to inject HTML into the DOM.I actually took the
time to write you the exact scripts you need. To test this, you have two
options:Option A: just find any AEM component, replace the Sightly HTL
and proceed; push code to AEM and test the pageOption B: create a new
component and include all the code that I have provided into the Sightly
HTL; push code to AEM and test the pageHow this works. You click on the
button on the screen, and after 500 milliseconds, you should be able to
see the component's code, JavaScript injected into the dom. <!--/* The
component to inject HTML into */--> <div id="cmp-badge"></div> <!--/*
The button that you speak of */--> <button id="example-button">Click
Me</button> <!--/* inline JavaScript Block */--> <script> // Using
Sightly HTL, build the HTML you want to inject into the cmp-badge
element window.example = ` <div class="cmp-badge"> <h1>The page name is:
${currentPage.path @ context='unsafe'}</h1> </div> `; // add event
listener to the example-button
document.getElementById("example-button").addEventListener("click",
function() { // some fake API being called and returns success after 500
milliseconds setTimeout(function() { // add Sightly HTL into the
cmp-badge element document.getElementById("cmp-badge").innerHTML +=
window.example; }, 500); });