javascript - (コンテンツと属性) で div を追加

Question

$("#container").add("div").html("Hello");

この行は、#container の html をめちゃくちゃにして変更したか、少なくとも私が意図したことを実行しませんでした。

コンテナー div、子孫に異なる属性と値 (html?) を持つ div を追加しようとしています。

必要なこれらの属性と値を使用して、追加したい新しい div を変更する方法がよくわかりませんか? どのように？

Answer 1

では、なぜそうではないのでしょうか。

$("#container").append("<div>Hello</div>");

またはそうでなければ：

var $div = $(document.createElement("div"))
           .attr( attributeKey, attributeValue )
           .prop( propertyKey, propertyValue )
           .text("Hello");
$("#container").append($div);

注:$(document.createElement("div")) over の$("<div></div>")方が少し速いので使用してください。

Answer 2

var newDiv = $('<div></div>');
newDiv.attr('id', 'myId');
newDiv.html('Hello World!');

$('#container').append(newDiv);

jsFiddle の例

Answer 3

私自身の提案は次のとおりです。

$('<div />', {
    'text' : 'Hello world',
    'class' : 'newDiv',
    'click' : function (){
        console.log('You clicked the newly-added div');
    },
    'contentEditable' : true
}).appendTo('#container');

JS フィドルのデモ。

ただし、新しく作成した要素に HTML を追加したい場合は'html'、代わりに を使用し'text'ます。

$('<div />', {
    'html' : '<em>more text</em>',
    'class' : 'newDiv',
    'click' : function (){
        console.log('You clicked the newly-added div');
    },
    'contentEditable' : true
}).appendTo('#container');

JS フィドルのデモ。