javascript - 如何将新文本添加到同一类的元素而不覆盖现有元素？

Question

抱歉，如果我的问题不清楚。 基本上我有以下代码

HTML:

    <div class="container">
        <textarea class="newText" placeholder="Have something to say?"></textarea>
        <button class="btn btn-default btn-sm">Post</button>
    </div>
<div class="main">
    <div class="postFeed">
        <ul class="postFeedElements">
            <li>
                <ul class="iconList pull-right">
                    <li> <span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove"></span>

                    </li>
                </ul>
                <li>
                     <h4 class="noSelect"> Text</h4>

                </li>
        </ul>
    </div>
</div>

JQuery:

var newPost = function () {
$('.btn').click(function () {
    var post = $('.newText').val();
    $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right"><li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>').appendTo('.container');
    $('.noSelect').text(post);
    $('.newText').val(" ");
});

http://jsfiddle.net/r8umr1m3/

texarea 中的文本输入被传递到相同 div 元素的新标题中。
目前，当新文本传递到新 div 时，它会覆盖现有 div 中的任何现有文本，因为每个标题元素共享相同的类。我怎样才能使每个元素根据文本区域中的输入具有不同的文本，同时仍然保持相同的类？

谢谢

Answer 1

将文本本身插入选择器中的大字符串

'....<h4 class="noSelect">'+post+'</h4> ....'

并删除

$('.noSelect').text(post);

DEMO