我该如何添加<p>用于包装联系表格 7 响应消息的标签？</p>

Question

I am implementing the new tag manager update on a contact 7 form. It works adding some attributes to the div containing the response message. My problem is that the text of the response must be wrapped inside <p> tags and those tags must also be wrapped by the div .

- This is the div before submitting the form:

<div class="wpcf7-response-output" aria-hidden="true"></div>

- And this is the same div after the form is submitted , Note that the values of the attributes of the div are changed for privacy issues.

<div class="wpcf7-response-output" aria-hidden="true" data-gtm-vis-recent-on-screen-99999999_9="9999999" 
data-gtm-vis-total-visible-time-99999999_9="100" data-gtm-vis-has-fired-9999999_9="1" data-gtm-vis-first-on-screen-999999_9="9999999" › Su mensaje se ha enviado con éxito. Muchas gracias. </div>

- This is what a need (edited in chrome dev tools

<div class="wpcf7-response-output" aria-hidden="true" data-gtm-vis-recent-on-screen-99999999_9="9999999"
data-gtm-vis-total-visible-time-99999999_9="100" data-gtm-vis-has-fired-9999999_9="1" data-gtm-vis-first-on-screen-999999_9="9999999" >
<p>
Su mensaje se ha enviado con éxito. Muchas gracias.
</p>
</div>

Thanks in advance for your help.

Answer 1

You can try innerHTML.

<div class="wpcf7-response-output" aria-hidden="true"data-gtm-vis-recent-on-        
screen-99999999_9="9999999" 
data-gtm-vis-total-visible-time-99999999_9="100" data-gtm-vis-has-fired- 
9999999_9="1" data-gtm-vis-first-on-screen-999999_9="9999999"> 
Su mensaje se ha enviado con éxito. Muchas gracias. 
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
    document.querySelector(".wpcf7-response-output").innerHTML = 
    "<p>Su mensaje se ha enviado con éxito. Muchas gracias. <p/>";
    }
</script>