How to set a <div> inside of a <p>?

Question

I want to use a <div> inside a <p> so that when I render the code, it should print showing the div. Ex: <p> this is a <div></div> </p> Output: this is a <div><div/>

I've tried the code below, but whenever I input any <> in the field, it ignores it and uses it to style the content.

<input type="text" id="body_text" value="" />
<br />
<input type="text" id="title_text" value="" />
<br />
<button type="button" onclick="myFunction()">Try it</button>

<p id="global-title"></p>
<p id="global-body"></p>

<script>
  // Here the value is stored in new variable x
  function myFunction() {
    var x = document.getElementById("title_text").value;
    document.getElementById("global-title").innerHTML = x;
    var y = document.getElementById("body_text").value;
    document.getElementById("global-body").innerHTML = y;
  }
</script>

Answer 1

Use .innerText instead of .innerHTML

// Here the value is stored in new variable x
  function myFunction() {
    var x = document.getElementById("title_text").value;
    document.getElementById("global-title").innerText = x;
    var y = document.getElementById("body_text").value;
    document.getElementById("global-body").innerText = y;
  }

<input type="text" id="body_text" value="" />
<br />
<input type="text" id="title_text" value="" />
<br />
<button type="button" onclick="myFunction()">Try it</button>

<p id="global-title"></p>
<p id="global-body"></p>