web-dev-qa-db-ja.com

jQueryでネストされたHTML要素を作成する最良の方法

いくつかのネストされた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要素を2、3個作成することに関する質問です。プラグインまたは同様のケースのDOM依存関係を構築するときのように

javascriptjquerydomnested
49
Maverick

それらを長い文字列として記述し、適切な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に内部的に依存しません。

59
lucideer

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

$('<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);
20
Brad Christie

私は このソリューション を見つけましたが、他の何かを研究していました。 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 );
19
Hugh Chapman

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

    $("<div>", {class: "wrapper"}).append(
        $("<div>", {class: "inner"}).append(
            $("<span>").text(
                "Some text"
            )
        ), 
        $("<div>", {class: "inner"}).append(
            $("<span>").text(
                "Some text"
            )
        )
    ).appendTo("body")
7
matt3141

長いい文字列や巨大なメソッドが連鎖していることに加えて、3番目の方法があります。 plain old variablesを使用して、individual要素を保持できます。

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>

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

編集：ただし、1つの注意点は、textContentをネストされた要素（たとえば、<p>Hello, <b>world!</b></p>。）その場合、おそらく文字列リテラルなどの他の手法のいずれかを使用する必要があります。

7
jackvsworld

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

'<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を使用することです。そうすれば、不要なノイズがさらに少なくなります。

1
x-yuri