Visualforce components are server-side rendered. In other words there is a component on the Salesforce servers that looks at at
apex:outputText (and any other VF components) and transmogrifies it into normal HTML. Attempting what you are trying is impossible as the browser fundamentally doesn't understand what
apex:outputText is. By the time your Visualforce page's
apex:outputText makes it down to the browser, it probably resembles something more like:
<span class="someclass" id="blahblah">My Text</span>
Maybe there is a
div wrapped around it...maybe not.
If you need to add something to the DOM client side...then just add the appropriate HTML element.
If it needs to be driven by data from Salesforce then you have some options:
- Bring it into some kind of local memory-resident data in the form of some kind of JS object
- You can bind it to an
apex:inputHidden then get to it when you need it
- Generate the DOM element on page load then hide/unhide when needed
The last option is probably the simplest, and would be easy to implement in jQuery (which you appear to have selected). Although if you have a lot of these, it is potentially crazy-making to track the state of everything that should/should not be rendered at any one time. It also can mean quite a bit of overhead in undisplayed HTML on the client.
This is why a lot of client-side development in Visualforce has gone the way of structured opinionated frameworks like AngularJS.