Form In <p> Not Getting Deleted With InnerHTML

I am trying to update a <p> tag using the .innerHTML property. The <p> tag is set-up as

<p id="p_id">
<form id="form_id">
<![CDATA[Other form stuff here]]>
</form>
</p>
And my JavaScript

document.getElementById('p_id').innerHTML = 'my message here.'
alert(document.getElementById('p_id').innerHTML);
When I call that JS code, it adds "my message here" in front of the form and only alerts "my message here", not the form code.

When I add text by default in front of the form code, that gets replaced but the form still remains.