Adding character to end of textarea or caret position using JavaScript?

Question

I have tried to do this by getting the VALUE of the textarea and changing the innerHTML to be the value + mychar. It works if I haven't added any strings to the preloaded textarea, but after that it just doesn't work( meaning it does nothing). Why not after I add new strings to textarea? I would greatly prefer using the same way. And please avoid jQuery, except if crucial.
HTML:

<button onclick = "AddLess()" class = "class">
    &lt;
    </button>
    <button onclick = "AddMore()" class = "class">
    &gt;
    </button>
    <button onclick = "AddExl()" class = "class">
    !
    </button>
    <button onclick = "AddQuote()" class = "class">
    "
    </button>
    <button onclick = "AddThing1()" class = "class">
    {
    </button>
    <button onclick = "AddThing2()" class = "class">
    }
    </button>
    <button onclick = "AddFin()" class = "class">
    /
    </button>
    <button onclick = "AddSingle()" class = "class">
    '
    </button>
    <button onclick = "AddPlus()" class = "class">
    +
    </button>

JavaScript:

function AddLess()
{
document.getElementById('code').innerHTML = document.getElementById('code').value + "<";
}
function AddMore()
{
document.getElementById('code').innerHTML = document.getElementById('code').value + ">";
}
function AddExl()
{
document.getElementById('code').innerHTML = document.getElementById('code').value + "!";
}
function AddQuote()
{
document.getElementById('code').innerHTML = document.getElementById('code').value + '"';
}
function AddThing1()
{
document.getElementById('code').innerHTML = document.getElementById('code').value + "{";
}
function AddThing2()
{
document.getElementById('code').innerHTML = document.getElementById('code').value + "}";
}
function AddFin()
{
document.getElementById('code').innerHTML = document.getElementById('code').value + "/";
}
function AddSingle()
{
document.getElementById('code').innerHTML = document.getElementById('code').value + "'";
}
function AddPlus()
{
document.getElementById('code').innerHTML = document.getElementById('code').value + "+";
}
function AddBracket1()
    {
        document.getElementById('code').innerHTML = document.getElementById('code').value + "(";
    }
function AddBracket2()
    {
document.getElementById('code').innerHTML = document.getElementById('code').value + ")";
    }
function AddDot()
    {
document.getElementById('code').innerHTML = document.getElementById('code').value + ".";
    }
function AddSemi()
    {
        document.getElementById('code').innerHTML = document.getElementById('code').value + ";";
    }

Answer 1

function _addChar(c)
{
  document.getElementById('code').value = document.getElementById('code').value + c;
}

works for me