User Input to HTML Tag output
<p>Ok an example of what i am trying.</p>

<p>User input: <a href="http://google.com" rel="nofollow">http://google.com</a></p>

<p>I want the output to be: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
$(document).ready(function() {
  // Handler for .ready() called.

  $("#change-it").click(function() {
    var userLink = $('#usr-input').val().replace(/.*?:\/\//g, "");
    $('#users-text').text('&lt;a href="' + userLink + '" &gt;&lt;img src="rainbow.gif"&gt;&lt;/a&gt;');
    $('#user-link').attr('href', 'http://' + userLink);
  });

});
&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;input type="text" class="form-control" id="usr-input"&gt;
&lt;br&gt;
&lt;button id="change-it" type="button"&gt;Update Text&lt;/button&gt; 
&lt;br&gt;
&lt;div id="users-text"&gt;&lt;/div&gt;
&lt;br&gt;
&lt;a id="user-link" href="#" target="_blank"&gt;
  &lt;img src="http://orig09.deviantart.net/8364/f/2014/053/f/9/free_space_galaxy_texture_by_lyshastra-d77gofi.png" /&gt;
&lt;/a&gt;</code></pre>
</div>
</div>
</p>

<p>How can i do this with Javascript?</p>

<p>Regards.</p>