I believe you got confused by builtin XSS prevention of JSF which caused your "plain vanilla" HTML to get escaped and thus displayed as-is instead of being interpreted as part of HTML source. Given that you're familiar with PHP, the explanation is that JSF has basically PHP's htmlspecialchars()
by default turned on in all EL expressions printing output.
Just use <h:outputText>
with escape
attribute set to false
to turn off implicit HTML escaping.
<h:outputText value="#{bean.html}" escape="false" />
Please make sure that you're fully aware of the potential XSS attack hole created here when it concerns user-controlled input. Your question at its own already indicates that you had no idea of it.
See also:
As to the concrete functional requirement,
This is because I want to add three different primefaces components each time a user clicks on one of the component that has been added. I could not achieve this with taglibs.
Please note that JSF code is not HTML code. You should instead be writing those JSF components directly in the view and use the rendered
attribute to render them conditionally.