javascript - 单击按钮时将文本从文本区域附加到 div

Question

我有一个按钮，在单击事件时会生成一个 div。新创建的 div 是可拖动的，并保留在另一个 div 中。问题:当创建 div 时，我试图向其中添加文本。由于没有正确从文本区域获取值并将其附加到 div，因此没有附加任何内容。 JSFIDDLE

Jquery

$('#button').click(function(e) {
    $('<div class="draggable" class="ui-widget-content"></div>').draggable({ containment: "parent" }).appendTo('.middle-side');
    $('textarea').val().appendTo('.draggable');
});

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea><br/>
 <input type="button" id="button" value="Add Div with Text"/><br/>

<div>
    <div class="middle-side"></div>
</div>

Answer 1

使用.text而不是.appendTo :

$('<div class="draggable" class="ui-widget-content"></div>')
    .draggable({ containment: "parent" })
    .appendTo('.middle-side')
    .text($('textarea').val())

示例: http://jsfiddle.net/0wbnud4k/11/

或者，也许更干净一点:

$('<div />', {
    'class': 'draggable ui-widget-content',
    text: $('textarea').val(),
    appendTo: '.middle-side',
    draggable: {
        containment: 'parent'
    }
});

示例: http://jsfiddle.net/0wbnud4k/13/

.appendTo 是 jQuery 对象上的一个方法。使用 .val 检索的文本只是一个字符串，因此没有 .appendTo 方法。