jQuery .append () textarea для div имеет .val () неопределенный

Что с этим не так?

<button id='myButton'>Click me</button>

<p>Borken</p>
<div id='RS_msgBox'></div>

<hr />


<!-- This is the control. The structure is exactly the same as when after 
     the JS gets done .appending to #RS_msgBox -->

<p>Works</p>
<div id='RS_msgBox2'>
    <div id='RS_msgs2'>
        <textarea id='RS_text2' cols=50 rows=5>
            I was here before any JS affected me.
        </textarea>
    </div>
</div>


jQuery('#myButton').click(function () {

    var msgDiv  = jQuery("#RS_text"),
        msgDiv2 = jQuery("#RS_text2"),
        logOne  = '\nI am the first log entry. ',
        logTwo  = "\nHey, where is the first entry? ";

    jQuery("#RS_msgBox").append("<div id='RS_msgs'><textarea id='RS_text' cols=50 rows=5>I was via JS append().</textarea></div>");

    // Experiment
    console.log('Before:'+msgDiv.val());
    msgDiv.val(msgDiv.val()+logOne); // Doesn't work because msgDiv.val() is undefined at this point.  But why?? I 'defined' it when I .append()ed it, didn't I?
    console.log('After:'+msgDiv.val());

    // Control
    msgDiv2.val(msgDiv2.val()+logOne);

    // Appending further text still fails whether we call another function or not.
    anotherFunc(logTwo);
});

function anotherFunc(newText) {
    var msgDiv = jQuery("textarea#RS_text"),
        msgDiv2 = jQuery("textarea#RS_text2");

    msgDiv.val(msgDiv.val()+newText);
    msgDiv2.val(msgDiv2.val()+newText);
}

http://jsfiddle.net/t3knocrat/NZLjd/

tl; dr: Почему я не могу .append() a <textarea> в <div> и сразу установить для него .val(logOne)? Что еще более важно, как исправить/обойти?

-

Я нашел ответы на SO, которые почти отвечают на мой вопрос, но никто не объясняет, почему недавно созданная <textarea> не добавляется, или КАК ее обойти.

Другими словами, я уверен, что это дублированный вопрос, но я не нашел тот, который отвечает на мои два вопроса (почему? & Как?).

Я предполагаю, что браузеру требуется немного времени для .append() <textarea> для DOM, и код работает асинхронно. Другими словами, код просто "пропускает" установку .val(logOne) потому что #RS_text еще не готов (нет ошибок, брошенных, пойманных или обработанных), и он просто продолжает на нем весёлый способ установки .val(logTwo) на #RS_text2.

Кто-нибудь знает, если это звучит где-то рядом с правильным?

В конечном счете, я полагаю, что более важно, как исправить/обойти это. Цель состоит в том, чтобы создать текстовую область, созданную с единственной целью получения записей заметок/журналов из остальной части javascript (через node и socket.io). И этот код работает во второй раз, когда <textarea> был создан, и к нему отправляется новая запись в журнале.