javascript - 生成された要素を jQuery でラップする

Question

私はこれを作成しようとしています:

<label><input id=""><span>Lorem ipsum dolor</span></label>

これは私のコードです：

$('.property .includes')
    .append('<label>').html(
        $('<input>').attr('id', this.id) +
        $('<span>').html(this.description)
    );

「[オブジェクト] [オブジェクト]」と書かれているだけなので、機能していないようです。

上記のコードを作成するにはどうすればよいですか?

Answer 1

コードを次のように変更する必要があります。

$('<label/>')
    .append( $('<input>').attr('id', this.id) )
    .append( $('<span>').html(this.description) )
    .appendTo('.property .includes');

また、スパン要素と入力要素をラベル要素に追加しようとしていると確信しています。

.appendTo関数呼び出しをネストする代わりに、同様に使用することを選択しました。

$('.property .includes').append(
  $('<label/>')
    .append( $('<input>').attr('id', this.id) )
    .append( $('<span>').html(this.description) )
);

Answer 2

mkoryak は私を打ちのめしました。

    $('.property .include').append($('<label></label>')
                              .append($('<input></input>').attr('id', this.id))
                              .append($('<span></span>').html(this.description)));

ここにもJsFiddleがあります

Answer 3

以下のように使ってみてください。

$('.property .includes').append(
           $('<label />').append($('<input />', {'id': this.id}))
                         .append($('<span />').html(this.description))
     );

デモ: http://jsfiddle.net/FJAjK/

Answer 4

次のことを行う必要があります。

var label = $("<label />").html(
    "<input id='" + this.id + "'>" +
    "<span>" + this.description + "</span>"
);
$('.property .includes').append( label );