将 p 放在 span 内或强制 h:outputText 围绕文本生成 div

Question

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

• 决定每个单词的类型

• 在其周围添加一个 span 并带有相关的 CSS 类

• 保留原始文本结构（即 \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 的 DevTool 元素选项卡的片段：

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:outputText> 的<h:panelGroup layout="block"> 中。

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