Добавление символа в конец текстовой области или позиции каретки с помощью JavaScript?

Я попытался сделать это, получив значение VALUE текстового поля и изменив innerHTML на значение + mychar. Он работает, если я не добавил никаких строк в предварительно загруженную текстовую область, но после этого он просто не работает (это значит, что ничего не делает). Почему не после добавления новых строк в textarea? Я бы предпочел использовать то же самое. И, пожалуйста, избегайте jQuery, кроме случаев, когда это важно.
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 + ";";
    }