Insert text at caret - insert new lines and tab spaces
<p>I have some code that I made a while ago shown below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>selected = '';

$('img').click(function(){
  console.log($(this).attr('alt'));
 selected = $(this).attr('alt');
});

$('#comments').click(function(){
 insertAtCaret('comments',selected)
  // Clear the selection so it isn't copied repeatedly
  selected = '';
});

function insertAtCaret(areaId,text) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
        "ff" : (document.selection ? "ie" : false ) );
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        strPos = range.text.length;
    }
    else if (br == "ff") strPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0,strPos);  
    var back = (txtarea.value).substring(strPos,txtarea.value.length); 
    txtarea.value=front+text+back;
    strPos = strPos + text.length;
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        range.moveStart ('character', strPos);
        range.moveEnd ('character', 0);
        range.select();
    }
    else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;a href="#!"&gt;&lt;img src="smiley1.png" alt="{smiley001}"&gt;&lt;img src="smiley2.png" alt="{smiley002}"&gt;&lt;img src="smiley3.png" alt="{smiley003}"&gt;&lt;img src="smiley4.png" alt="{smiley004}"&gt;&lt;img src="smiley5.png" alt="{smiley005}"&gt;&lt;/a&gt;&lt;br&gt;
&lt;textarea id="comments" cols="50" rows="10"&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>

<p>In this code, you click on a picture and then you click on a space in the textarea and the picture's alt attribute is pasted at the position of the caret.</p>

<p>I want to insert tab spaces and new lines for some of the pictures, so what values would I put for the alt attributes of the corresponding images?</p>