javascript - 使用jQuery将HTML代码插入Primefaces对话框

我正在尝试在Primefaces对话框中动态插入html代码。我要附加的html代码取决于电子邮件正文。

例如，我想在viewEmail div中添加以下html代码：

<h2>Resetting your Password</h2>
<p>Hi Juan Pablo Proverbio,</p>
<p>You've indicated that you've forgotten your password and would like to reset it. We've started the process by sending you a special code that you can use to reset your password.</p>
<p>In order to complete this process, copy the code below and go back to the page on the app or webpage when you started this process and enter the code in the place indicated on that page.</p>
<p>Here are your details:</p>
<p>email address:
    <b>juanp@XXX</b>
</p>
<p>reset code:
    <b>LxoAd5NM</b>
</p>
<p>Once you've entered this code you will be able to create a new password for your account.</p>
<p>If you've remembered your password, just ignore this code and keep using your current password. Please note that this code is only valid for 24 hours, so if you haven't used it by then you will need to start the process again. </p>
<p>If you didn't start this process by using a 'Forgot my Password' function on an app or website related to [Serv] then someone has done this using your email address. You can just ignore this email and your password won't be changed. If this keeps happening, please contact us.</p>
<p>Have a great day :)</p>
<p style="font-size:70%;">This email was sent to you because you are registered on [Serv] using the email address: juanp@XXX and someone requested a password reset for your account.</font></p>

这是我的视图对话框：

<h:form id="viewEmailForm">
       <p:dialog header="Email viewer"
                 widgetVar="viewEmail" showEffect="puff" hideEffect="drop" width="600">

           <h:panelGrid columns="2">
               <p:outputLabel value="To"/>
               <p:outputLabel value="#{emailBean.selectedEmail.to}"/>

               <p:outputLabel value="From"/>
               <p:outputLabel value="#{emailBean.selectedEmail.from}"/>

               <p:outputLabel value="Subject"/>
               <p:outputLabel value="#{emailBean.selectedEmail.subject}"/>

               <p:outputLabel value="Email body"/>
               <div class="viewEmail">

               </div>

               <p:outputLabel value="Type"/>
               <p:outputLabel value="#{emailBean.selectedEmail.bodyType}"/>

               <p:outputLabel value="Retries"/>
               <p:outputLabel value="#{emailBean.selectedEmail.retries}"/>

               <p:outputLabel value="Last error"/>
               <p:outputLabel value="#{emailBean.selectedEmail.lastError}"/>

               <p:outputLabel value="Status"/>
               <p:outputLabel value="#{emailBean.selectedEmail.status}"/>

               <p:outputLabel value="Created info"/>
               <p:outputLabel value="#{emailBean.convertCreatedDate()}"/>

          </h:panelGrid>
          <f:facet name="footer">
               <p:commandButton value="Close" type="button" styleClass="ui-confirmdialog-no"
                                    icon="ui-icon-close" onclick="PF('viewEmail').hide()"
                                    style="float:right !important; margin-bottom: 10px !important"/>
          </f:facet>
      </p:dialog>
</h:form>

我当前糟糕的jQuery脚本是：

<script id="viewEmailScript" type="text/javascript">
     $(".viewEmail").append( #{emailBean.selectedEmail.body} );
</script>

但这不起作用。

您有什么建议我如何从primefaces组件中使用jQuery附加此html代码？

最佳答案

为了呈现html代码，任何人都只需要在primefaces outputLabel中添加escape =“ false”即可将值附加为html代码。

<p:outputLabel value="#{emailBean.selectedEmail.body} " escape="false"/>

谢谢！