在按钮单击时将文本从textarea附加到div

时间:2014-08-27 19:35:23

标签: javascript jquery

我有一个按钮,在点击事件中生成一个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>

2 个答案:

答案 0 :(得分:8)

使用.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方法。

答案 1 :(得分:0)

您应该使用text方法而不是appendTo并按如下方式更改它:

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

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

您也可以在以下位置查看:

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