使用 javascript 从文本输入框中添加具有特定内容的样式化 div答案

【问题标题】：Adding a styled div with specific content from text input box using javascript使用 javascript 从文本输入框中添加具有特定内容的样式化 div
【发布时间】：2011-06-12 09:41:25
【问题描述】：

对不起，我有点 JavaScript 菜鸟。我正在使用 Jquery。

我有一个输入框，我想获取文本输入并使用输入创建一个新的 div，并在其上放置适当的标签。

具体来说，取输入值和输出：

输入值 5

清空输入框，向下移动50px。

我几乎不知道我在用 javascript 做什么。

【问题讨论】：

标签： javascript jquery html input append

【解决方案1】：

你的意思是这样吗？

$('#myinput').css({top: $(this).offset().top+50}).prepend('<div><input type="text" value="'+$('#myinput').val()+'" /></div>').val('');

对不起，链接太长了，我知道还有其他方法，但这是我能想到的唯一方法。

编辑：这可能工作：

$('input').attr('value',$('#myinput').val()).prependTo($('#myinput'));
$('#myinput').css({top: $(this).offset().top+50}).val('');

【讨论】：

【解决方案2】：

$('input').bind('keydown', function(e) {
    var $self = $(this),
        dimen = $.extend($self.position(), {
             width:  $self.outerWidth(),
             height: $self.outerHeight()
        });

    if( e.which === 13 && $.trim(this.value).length ) {
        $('<div>', {
             text: this.value,
             css: {
                 position:   'absolute',
                 width:      dimen.width,
                 height:     dimen.height,
                 left:       dimen.left,
                 top:        dimen.top
             }
        }).appendTo($self.parent());

        $self.val('').css('position', 'absolute').animate({top: '+=50'}, 1000);
    }
});

演示：http://www.jsfiddle.net/4yUqL/81/

【讨论】：

当我被你的绝对专业性所窒息时，我淹死了。最好的解决方案，但 CSS 有点 OTT。

【解决方案3】：

你可以看看以下函数：

$("input#myinput").val() - gives you the value in the input field with id="myinput"
$("input#myinput").val("") - clears the input field with id="myinput"
$("div#mydiv").html("blah") - sets the content of the div with id="mydiv" to blah
$("div#mydiv").append("blah") - adds blah to the current content of the div with id="mydiv"
$("div#mydiv").css({ marginTop: '50px' }); - Sets the margin of the div with id="mydiv"

将所有这些组合到一个事件处理程序中应该可以满足您的需要

【讨论】：

【解决方案4】：

var 内容 = $('#input_id'').val(); var elem = $('').addClass('class_name').html(content)

$('#id_of_element_to_append').append(elem)

试试上面的。

鲍勃

【讨论】：