jquery .html（）と.append（）

空のdivがあるとしましょう：

<div id='myDiv'></div>

これは：

$('#myDiv').html("<div id='mySecondDiv'></div>");

と同じ：

var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);

HTMLの文字列をjQueryのメソッドのいずれかに渡すと、次のようになります。

一時的な要素が作成されます、それをxと呼びましょう。x's innerHTMLは、渡したHTMLの文字列に設定されます。次に、jQueryは生成された各ノード（つまり、xのchildNodes）を新しく作成されたドキュメントフラグメントに転送し、次にそれをキャッシュします。次に、フラグメントをchildNodes新しいDOMコレクションとして返します。

jQueryはブラウザ間のチェックやその他のさまざまな最適化を行うため、実際にはそれよりもはるかに複雑です。たとえば、単に<div></div>に渡す場合jQuery()、jQueryはショートカットを使用して単純に実行しますdocument.createElement('div')。

編集：jQueryが実行するチェックの数を確認するには、こちら、こちら、こちらをご覧ください。

innerHTMLで、一般的にそれはあなたがすべての時間を行う内容を管理することはできませんが、より高速なアプローチ。jQueryのアプローチはそれほど単純ではありませんelement.innerHTML = ...-すでに述べたように、一連のチェックと最適化が行われています。

正しい手法は状況に大きく依存します。同一の要素を多数作成する場合は、最後に、大規模なループを作成し、反復ごとに新しいjQueryオブジェクトを作成します。たとえば、jQueryで100個のdivを作成する最も簡単な方法：

jQuery(Array(101).join('<div></div>'));

考慮すべき可読性とメンテナンスの問題もあります。

この：

$('<div id="' + someID + '" class="foobar">' + content + '</div>');

... これよりも保守がはるかに困難です。

$('<div/>', {
    id: someID,
    className: 'foobar',
    html: content
});

彼らは同じではありません。最初のものは、最初に別のjQueryオブジェクトを作成せずにHTMLを置き換えます。2番目は、2番目のdiv用の追加のjQueryラッパーを作成し、それを最初のdivに追加します。

1つのjQueryラッパー（例ごと）：

$("#myDiv").html('<div id="mySecondDiv"></div>');

$("#myDiv").append('<div id="mySecondDiv"></div>');

2つのjQueryラッパー（例ごと）：

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').html(mySecondDiv);

var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').append(mySecondDiv);

いくつかの異なるユースケースが進行中です。コンテンツを置き換える場合.htmlは、に相当するため、素晴らしい呼び出しですinnerHTML = "..."。ただし、コンテンツを追加するだけの場合は、追加の$()ラッパーセットは不要です。

div後で追加したものを操作する必要がある場合にのみ、2つのラッパーを使用します。その場合でも、必要なのは1つだけです。

var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
// other code here
mySecondDiv.hide();

よるならば.add、あなたの平均.append場合、結果は同じである#myDiv空です。

性能は同じですか？わからない。

.html(x) と同じことをしてしまう .empty().append(x)

まあ、DOMの作成よりも速い.html()使用法。.innerHTML

次の方法で2番目の方法で同じ効果を得ることができます。

var mySecondDiv = $('<div></div>');
$(mySecondDiv).find('div').attr('id', 'mySecondDiv');
$('#myDiv').append(mySecondDiv);

ルカはそれを述べました html() HTMLを挿入だけでパフォーマンスが向上すると。

ただし、場合によっては、2番目のオプションを選択することもできます。

// Clumsy string concat, error prone
$('#myDiv').html("<div style='width:'" + myWidth + "'px'>Lorem ipsum</div>");

// Isn't this a lot cleaner? (though longer)
var newDiv = $('<div></div>');
$(newDiv).find('div').css('width', myWidth);
$('#myDiv').append(newDiv);

.html() すべてを置き換えます。

.append() 最後に追加するだけです。

あなたがこのようなものを持っている場合、与えられた答え以外に：

<div id="test">
    <input type="file" name="file0" onchange="changed()">
</div>
<script type="text/javascript">
    var isAllowed = true;
    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = $('#test').html();
            tmpHTML += "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').html(tmpHTML);
            isAllowed = false;
        }
    }
</script>

ファイルがアップロードされた場合、もう1つのファイルアップロードを自動的に追加することを意味します。ファイルがアップロードされた後、最初のfile-upload要素が再作成され、アップロードされたファイルがワイプされるため、上記のコードは機能しません。 。代わりに.append（）を使用する必要があります。

    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').append(tmpHTML);
            isAllowed = false;
        }
    }

これは私に起こりました。JQueryバージョン：3.3。オブジェクトのリストをループしていて、各オブジェクトを親dom要素の子として追加する場合、.htmlと.appendの動作は大きく異なります。.html最後のオブジェクトのみを親要素に.append追加することになりますが、すべてのリストオブジェクトを親要素の子として追加します。