Web applications are client⟷server applications, meaning that there is a clear separation between the client, which is your browser, and the web server. There is no direct connection between the server and the HTML that you see in your browser.

Try to visualize the process:

1. The user tries to open a web page, so the browser sends a HTTP request to the server.


2. The server processes the URL that was requested and identifies that it should go to the servlet that processes velocity templates, and identifies the .vm file that should be used to render the response.


3. The .vm file is read by the servlet on the server and rendered into a string representation of the HTML.


4. The HTML is sent to the client in the HTTP response. From now on, the server has no connection to that HTML.


5. The browser reads the HTML from the response, parses it, and displays it.


6. The JavaScript resources associated with that HTML are also fetched from the server, parsed and executed (in the client browser).

There is no way for the Velocity template (or any other code on the server) to access the HTML that is now in the browser, unless the browser explicitly sends it back to the server in another request.

What you can do is:

1. Write another piece of JavaScript code that listens to the click event.


2. The JS gets the serialized HTML from your target element, something like var html = document.getElementById('id_of_the_element').innerHTML;


3. The JS sends this string to the server using an XMLHttpRequest, either using the raw XHR support from the browser, or a JS framework of your choice.


4. On the server you write another servlet (or extend the functionality of an existing servlet) that receives this HTML and processes it as you want.