HTML preview showing the first element

Question

I made this html preview, it works very well for my purpose but the first element is appearing as text, and this is a bad result, I understand very little of jquery and javascript, I’m starting to study, I would like to understand what is going wrong.
Put <div></div> the opening tag appears: <div>, but only the first, the rest of the code does not appear
Snippet to better understand

function showPreview()
{
  var value = $('#copy').val().trim();
  value = value.replace("<", "&lt;");
  value = value.replace(">", "&gt;");
  $('#preview').html(value);
}

textarea {
resize:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="copy" onInput="showPreview();"><div><img src='https://i.imgur.com/FfInIT9.jpg' width='100'/></div>
</textarea>
<br>
<div id="preview"/>

Answer 1

This is why you’re giving replace, but inserting the character again, so it shows the first one. You have to leave it empty, so that the characters do not appear:

The regular expression: /</g inside the replace serves so that every time the text is found < and > are replaced by something, which in this case is nothing.

function showPreview()
{
  var value = $('#copy').val().trim();
  value = value.replace(/</g, "");   // vazio
  value = value.replace(/>/g, "");   // vazio
  $('#preview').html(value);
}

textarea {
  resize:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="copy" onInput="showPreview();">
</textarea>
<br>
<div id="preview"></div>

Answer 2

You need to change the Function and change your preview id. So the htmls tags you type will be interpreted as such.

function showPreview()
{
 var value = $('#copy').val().trim();
 $('#preview').html(value);
}

<div id="preview"> </div>

I hope I’ve helped.