html - 将 p 放在 span 内或强制 h :outputText to generate div around text

Question

在我的项目中，我从用户那里获取原始文本并将其发送到服务器以执行以下操作

• 决定每个词的类型

• 用相关的 CSS 类围绕它添加一个 span

• 保留原始文本结构(即\r\n 表示段落结束，因此我可以将其包装在 p 中)

  <

• 将结果返回给用户

使用

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

简而言之，我在服务器端做所有的 html 标记。 returned 结果是这样的(当然是一个长字符串，为了便于阅读，结果缩进了):

<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 -->

但是 h:outputText 会在文本周围生成 span 元素。尽管到目前为止我还没有发现任何问题。但是，我觉得这是不对的，因为我读到在 html 中将 p 放在 span 中是非法的。

是否有任何方法可以强制 h:outputText 在来自 Bean 的文本周围生成 div 或者是否有合法/更好的方法来完成此操作？

这是 Chrome 开发工具的元素选项卡中的一个片段:

Answer 1

这个，

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

不会生成任何额外的 HTML。所以你实际上没有那个标签。

根据您的 HTML DOM 检查器屏幕截图，您似乎确实有这个:

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

确实，这会生成一个 <span>元素，因为您已经明确指定了一个必须在客户端结束的属性，id属性。

去掉那个id属性，将其移动到 <h:panelGroup layout="block">包装 <h:outputText> .

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

如果你不需要在 ajax 的其他地方引用它，只需一个 <div id="wordTypeEditor">也可以。

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

另见:

• What jsf component can render a div tag?