58

ネストされた DOM 要素をいくつか作成する必要がある場合、その方法の 1 つは、それらを長い文字列として記述し、適切な jQuery 関数を使用してドキュメントに配置することです。何かのようなもの：

elem.html(
'<div class="wrapper">
    <div class="inner">
        <span>Some text<span>
    </div>
    <div class="inner">
        <span>Other text<span>
    </div>
</div>');

この方法は明らかに最もクリーンではありません。刺し傷が乱雑になるのにそれほど時間はかからず、編集が問題になります。私はこの記法の方がずっと好きです:

$('<div></div>', {
    class : 'inner'
})
.appendTo( elem );

問題は、上記のようにネストされた要素をオンザフライで作成するときに効率的に実装する方法がわからないことです。したがって、2 番目の表記法で 1 番目の例を実行する方法があれば、喜んでそれについて学びます。

基本的に、問題は、ネストされた HTML 要素をオンザフライで、乱雑な長い文字列を処理することなく作成するための最良の方法は何かということです。

注 : テンプレート エンジンについては認識しています。ただし、これはオンザフライで HTML 要素をいくつか作成することに関する質問です。プラグインの DOM 依存関係を構築するときや、同様のケースのように。

4

6 に答える 6

69

それらを長い文字列として記述し、適切な jQuery 関数を使用してドキュメントに配置します。何かのようなもの：

このアプローチの問題は、複数行の文字列が必要になることです-Javascriptがサポートしていないものです-実際には、次のようになります。

elem.html(
'<div class="wrapper">'+
    '<div class="inner">'+
        '<span>Some text<span>'+
    '</div>'+
    '<div class="inner">'+
        '<span>Other text<span>'+
    '</div>'+
'</div>');

上記で提案した方法を使用すると、これは私がなんとかして取得できるのと同じくらいきれいです。

elem.append(
    $('<div/>', {'class': 'wrapper'}).append(
        $('<div/>', {'class': 'inner'}).append(
            $('<span/>', {text: 'Some text'})
        )
    )
    .append(
        $('<div/>', {'class': 'inner'}).append(
            $('<span/>', {text: 'Other text'})
        )
    )
);

これを行うもう 1 つの利点は、(必要に応じて) DOM を再クエリすることなく、新しく作成された各要素への直接参照を取得できることです。

私はpolyglotsを書くのが好きなので、コードを再利用可能にするために、通常は次のようにします (jQuery.html()は XML をサポートしていないため)。

// Define shorthand utility method
$.extend({
    el: function(el, props) {
        var $el = $(document.createElement(el));
        $el.attr(props);
        return $el;
    }
});

elem.append(
    $.el('div', {'class': 'wrapper'}).append(
        $.el('div', {'class': 'inner'}).append(
            $.el('span').text('Some text')
        )
    )
    .append(
        $.el('div', {'class': 'inner'}).append(
            $.el('span').text('Other text')
        )
    )
);

これは方法 2 と大差ありませんが、より移植性の高いコードを提供し、内部的に に依存しませんinnerHTML。

于 2012-06-23T23:36:36.143 に答える
22

他のことを調べているときに、この解決策を見つけました。これは、jQuery の作成者による「jQuery の紹介」の一部であり、 end()関数を使用します。

$("<li><a></a></li>") // li 
  .find("a") // a 
  .attr("href", "http://ejohn.org/") // a 
  .html("John Resig") // a 
  .end() // li 
  .appendTo("ul");

あなたの質問に適用すると...

$("<div><span></span></div>") // div 
  .addClass("inner") // div 
  .find("span") // span 
  .html("whatever you want here.") // span 
  .end() // div 
  .appendTo( elem );
于 2013-09-11T23:19:36.077 に答える
21

私は次のアプローチが好きです：

$('<div>',{
  'class' : 'wrapper',
  'html': $('<div>',{
    'class' : 'inner',
    'html' : $('<span>').text('Some text')
  }).add($('<div>',{
    'class' : 'inner',
    'html' : $('<span>').text('Other text')
  }))
}).appendTo('body');

または、最初にラッパーを作成し、追加を続けます。

var $wrapper = $('<div>',{
    'class':'wrapper'
}).appendTo('body');
$('<div>',{
    'class':'inner',
    'html':$('<span>').text('Some text')
}).appendTo($wrapper);
$('<div>',{
    'class':'inner',
    'html':$('<span>').text('Other text')
}).appendTo($wrapper);
于 2012-06-23T23:06:01.320 に答える
12

長く醜い文字列や巨大なメソッドを連鎖させる以外に、第 3 の方法があります。単純な古い変数を使用して、個々の要素を保持できます。

var $wrapper = $("<div/>", { class: "wrapper" }),
    $inner = $("<p/>", { class: "inner" }),
    $text = $("<span/>", { class: "text", text: "Some text" });

次に、すべてを次のように結び付けappendます。

$wrapper.append($inner.append($text)).appendTo("#whatever");

結果：

<div class="wrapper">
  <p class="inner">
    <span class="text">Some text</span>
  </p>
</div>

私の意見では、これは最もクリーンで最も読みやすいアプローチであり、データをコードから分離できるという利点もあります。

編集:textContentただし、1 つの注意点は、ネストされた要素 ( . など)を混在させる簡単な方法がないこと<p>Hello, <b>world!</b></p>です。その場合、おそらく文字列リテラルなどの他の手法のいずれかを使用する必要があります。

于 2014-01-10T03:24:03.590 に答える
8

私はこのアプローチが好きです

    $("<div>", {class: "wrapper"}).append(
        $("<div>", {class: "inner"}).append(
            $("<span>").text(
                "Some text"
            )
        ), 
        $("<div>", {class: "inner"}).append(
            $("<span>").text(
                "Some text"
            )
        )
    ).appendTo("body")
于 2012-06-23T23:13:21.313 に答える
1

長い文字列は明らかに可能な限りクリーンな方法です。ブラケット、ドル記号などの不要な余分なノイズがなく、コードが適切にネストされていることがわかります。確かに、複数行の文字列として記述できることは利点ですが、現時点では不可能です。私にとって重要なのは、不要なシンボルをすべて取り除くことです。文字列が乱雑になり、編集が問題になる理由はわかりません。多くのクラスを割り当てた場合は、それらを別の行に配置できます。

'<div id="id-1"'
+ ' class="class-1 class-2 class-3 class-4 class-5 class-6">'
+ '</div>'

またはこの方法：

'<div id="id-1" class="'
    + 'class-1 class-2 class-3 class-4 class-5 class-6'
+ '">'
+ '</div>'

別のオプションはhaml、可能であれば、おそらくクライアント側で使用することです。そうすれば、不要なノイズがさらに少なくなります。

于 2013-08-26T15:26:07.973 に答える