Place p inside span or force h:outputText to generate div around text

Question

In my project, I take raw text from user and send it to server to do the following

decide what type of each word is
add a span around it with a related CSS class
keep the original text structure (i.e \r\n means paragraph-end so i can wrap it in a p)
display the result back to the user

using

<h:outputText value="#{wordTypeBean.wordTypeValues}" escape="false" />

In short, I am doing all the html markup at server-side. The returned result is something like this (of course as a long String, the result indented for readability):

<span> <!-- from h:outputText -->
  <p> <!-- the returned String coming from the Bean starts here -->
    <span class="interjection">Hello</span>
    <span class="noun">World</span>
    !
  </p>
  <p>
    <span class="noun">Life</span>
    <span class="verb">is</span>
    <span class="adjective">beautiful</span>
    .
  </p> <!-- the returned String coming from the Bean ends here -->
</span> <!-- from h:outputText -->

But h:outputText generates span element around the text. Even though I have seen no problems, so far. But, I have a feeling that it is not right as I read that in html it is illegal to place p inside span.

Is there any way to force h:outputText to generate div around the text coming from Bean or is there a legal/better way to accomplish this?

Here is a snip from Chrome's DevTool's element tab:

I cannot remove id, since i have a h:inputHidden to capture any edits made on the displayed text and send it (as is) back to my Bean via p:commandButton using onmousedown="$('#topF\\:tabview\\:wordsToSubmit').val($('#topF\\:tabview\\:wordTypeEditor').html());" — Ahmet, Feb 11 '16 at 13:23

score 6 · Accepted Answer · edited May 23 '17 at 12:18

This,

<h:outputText value="#{wordTypeBean.wordTypeValues}" escape="false" />

doesn't generate any additional HTML. So you actually don't have exactly that tag.

Based on your HTML DOM inspector screenshot, you appear to actually have this:

<h:outputText id="wordTypeEditor" value="#{wordTypeBean.wordTypeValues}" escape="false" />

Indeed, this will generate a <span> element because you've explicitly specified an attribute which must end up in client side, the id attribute.

Get rid of that id attribute, move it into a <h:panelGroup layout="block"> wrapping the <h:outputText>.

<h:panelGroup id="wordTypeEditor" layout="block">
    <h:outputText value="#{wordTypeBean.wordTypeValues}" escape="false" />
</h:panelGroup>

If you don't need to reference it elsewhere in ajax, just a <div id="wordTypeEditor"> is also fine.

<div id="wordTypeEditor">
    <h:outputText value="#{wordTypeBean.wordTypeValues}" escape="false" />
</div>

Place p inside span or force h:outputText to generate div around text

1 Answers1

See also: