在按鈕單擊時將文本從textarea附加到div

Question

我有一個按鈕，在單擊事件上生成一個div。 新創建的div是可拖動的，並且包含在另一個div中。 問題：正在創建div我試圖將文本附加到它。 由於沒有正確地從textarea中獲取值並附加到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方法。

Answer 2

您應該使用text方法而不是appendTo並按如下方式更改它：

var text = $('textarea').val();

$('.draggable').text(text);

你也可以在以下位置查看：

http://jsfiddle.net/0wbnud4k/12/