javascriptを使用してテキスト入力ボックスから特定のコンテンツを含むスタイル付きdivを追加する

Question

申し訳ありません、私はちょっとjavascript noobです。私はJqueryを使用しています。

私は入力ボックスを持っており、テキスト入力を受け取り、入力を使って新しいdivを作成し、適切なタグを付けたいと思います。

具体的には、入力値と出力を取る：入力値5

および入力ボックスをクリアしては50pxそれを下に移動します。

私はJavaScriptが何をしているのか分かりません。

Answer 1

$('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/

Answer 2

var content = $（ '＃input_id' '）。val（）; するvar elemは= $（ ''）。addClass（ 'CLASS_NAME'）。htmlの（コンテンツ）

$（ '＃のid_of_element_to_append'）。追加（elemは）

は、tryの上に付けます。

ボブ

Answer 3

このような意味ですか？長いチェーンについては申し訳ありません

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

、私は他の方法がある知っているが、これは、私は気圧の考えることができる唯一の方法でした。

EDIT：このが仕事があります。

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

Answer 4

あなたは以下の機能を見てすることができます

$("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" 

は、イベントハンドラにこのすべてを組み合わせることで、あなたが必要なものを行う必要があります