web-dev-qa-db-ja.com

append（）でhtmlの大きなブロックを追加する

Jqueryのappend（）を使用して大きなテキストブロックを追加しようとしています。

$('#add_contact_btn').click(function(event) {
    event.preventDefault();

    var large = '<div class="accordian_container"><a href="#" class="accordian_trigger"><h4>Co-Borrower Information</h4></a><hr/><div class="accordian_item" id="accord_item_2"><label> First Name</label><br/><input type="text"/><br/><label>Middle Name</label><br/>
            <input type="text"/><br/>
            <label>Last Name</label><br/>
            <input type="text" /><br/>
            <label>Home Number</label><br/>
            <input type="text"/><br>
            <label>Work Number</label><br/>
            <input type="text"/><br>
            <label>Cell Number</label><br/>
            <input type="text"/><br>
            </div>
            </div>';

    $('#accordion_container').append(large);



});

それは機能していないようで、append（）のドキュメントを見た後、私は理由を理解できません-アイデアはありますか？追加しようとしているのは大量のHTMLですか？

javascriptjqueryhtmlappend
18
Thomas

改行を削除します。

http://jsfiddle.net/DmERt/

var large = '<div class="accordian_container"><a href="#" class="accordian_trigger"><h4>Co-Borrower Information</h4></a><hr/><div class="accordian_item" id="accord_item_2"><label> First Name</label><br/><input type="text"/><br/><label>Middle Name</label><br/><input type="text"/><br/><label>Last Name</label><br/><input type="text" /><br/><label>Home Number</label><br/><input type="text"/><br><label>Work Number</label><br/><input type="text"/><br><label>Cell Number</label><br/><input type="text"/><br></div></div>';

$('#accordion_container').append(large);​
24
Kevin B

Javascriptには、複数行の文字列を記述する方法がありません。1行の文字列を開いて、数行下に移動してから閉じることはできません。 （JSで複数行の文字列を実行する方法はいくつかありますが、それらは逆向きです）。

ほとんどの人がこれを行う方法は次のようなものです。

var myString = '<p>Line One</p>' +
'<p>Line Two</p>' +
'<p>Line Three</p>';

注上記の答えは古く、もはや完全に真実ではありません。 ES6がより一般的になり、ES6から移行する人が増えるにつれて、複数行の文字列として使用できるテンプレートリテラルを使用できるようになります。

var myString = `<p>Line One</p>
<p>Line Two</p>
<p>Line Three</p>`;
31
Jimbo Jonny

非表示のHTMLでテンプレートを作成し、そのコンテンツのHTMLを追加する必要があります。例えば：

<div class="hide" id="template">
  <b>Some HTML</b>
</div>

jQuery：

$("#container").append($("#template").html());

JavaScript文字列にHTMLを入れるのは読みにくく、検索が難しく、エラーが発生しやすく、IDEはHTMLを適切にフォーマットするのに苦労します。

更新2019

この目的のために作成されたtemplateタグを確認してください。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

templateタグには、他の場所で無効なHTMLを含めることさえ許可されています。 tdの外側のtableタグ。

27
rybo111

長い文字列を複数の行に配置する場合は、文字列の配列を使用してそれらを結合する方が効率的であると理解しています。

var bigString = [
    'some long text here',
    'more long text here',
    '...'
];
$('#accordion_container').append(bigString.join(''));
8
David

各行の終わりにバックスラッシュを使用できます。

http://davidwalsh.name/multiline-javascript-strings

var multiStr = "This is the first line \
This is the second line \
This is more...";
7
Oliver Konig

別の選択肢は、テンプレートリテラルとback-ticks：

var large = `some long text here
some long text here
some long text here`;

これはかなり新しい構文であり、IEではサポートされていません。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

6
gustavwiz

Javascriptには、複数の行/ HTMLセクションを単一行に拡張するオプションがあり、HTML行の各行にbackslash（）を追加して、その継続行を識別します。

Note：-行を追加する際に考慮すべきことは、一重引用符と二重引用符のみです。一重引用符で開始する場合は、内部文字列で二重引用符を使用するか、その逆を使用します。二重引用符を使用しないと、行が切れて適切な結果が得られません。

$(element).append('<div class="content"><div class="left"></div><div class="right"></div></div>');

Javascript構文

 var str = ' <div class="content"> \
<div class="left"> \
</div> \
<div class="right"> \
</div> \
</div> ';

 document.getElementsByName(str).html(str);
 //or
 document.getElementsById(str).html(str);

JQuery構文

 $(element).append(' \
  <div class="content"> \
    <div class="left"> \
    </div> \
    <div class="right"> \
    </div> \
  </div> \
');

またはjqueryを介した3番目のリンクで言及されているように、これにhtmlテンプレートを使用できます

$("#div").load("/html_template.html");

http://www.no-margin-for-errors.com/blog/2010/06/17/javascript-tip-of-the-day-extending-a-string-across-multiple-lines/

Jqueryを使用して複数のhtml要素を追加

複数行のJavaScriptでHTMLを広げる

2
Ajay2707

また、jQueryでdivのクローンを作成してから、クローンを追加することもできます。

var accordionClone = $('.accordion_container').clone();
$('#accordion_container').append(accordionClone);
1
alexoviedo999

このように追加するだけで$（＃element）.append（large_html）、large_htmlに特殊文字（ ``）を付けて、後でありがとう。

0
Chidananda Nayak

デフォルトでは、ラップを含むHTMLコードを_append/prepend_とともに使用することはできません。_'or"_を直接使用します。ただし、現在これを行うには次の方法があります。

  1. 「+」を使用してHTMLコードを結合します。

  2. 「\」を使用してエスケープします。

  3. 「 `」（バックティック、 グレーブアクセント ）を使用します。追加の操作は不要です。このメソッドは、ES2015/ES6（ テンプレートリテラル ）からサポートされています。

  4. 必要な同じHTMLコードを含む隠しtagを追加します。 _<p id="foo" style="display:none;">_、次にuse.append($('#foo').html());。

    上記の_first three methods_にいくつかの使用シナリオを投稿します（Chromeブラウザーのコンソールで実行します）： enter image description here

それらの違いをはっきりと見ることができます。

0
Bravo Yeung

改行が問題である場合は、innerHTMLを使用するだけで、IE5以降のすべてのブラウザーで機能します。

$('#accordion_container')[0].innerHTML += large;​

または、コレクションの場合：

$('.accordion_container').forEach(function () {
    this.innerHTML += large;​
});
0
Pete B