Q:

HTML preview mostrando o primeiro elemento

Fiz esse html preview, ele funciona muito bem para o meu propósito porém o primeiro elemento está aparecendo como texto, e isso é um mal resultado, eu entendo muito pouco de jquery e javascript, estou começando a estudar, gostaria de entender o que está dando errado.
Se colocar <div></div> a tag de abertura aparece: <div>, mas apenas a primeira, o resto do código não aparece
Execute o snippet para entender melhor

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"/>

A:

É necessário alterar a function e alterar seu id preview. Assim as tags htmls que digitar irá ser interpretado como tal.
function showPreview()
{
 var value = $('#copy').val().trim();
 $('#preview').html(value);
}

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

Espero ter ajudado.

