29

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 ですか?

4

12 に答える 12

40

現代の答え

ES6 (およびそれ以降) がより一般的になり、ES6 からトランスパイルする人が増えるにつれて、複数行の文字列として使用できるテンプレート リテラルをますます使用できるようになりました。

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

元の2012年の回答（ES5）

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

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

var myString = '<p>Line One</p>' +
'<p>Line Two</p>' +
'<p>Line Three</p>';
于 2012-05-25T18:24:16.430 に答える
27

改行を削除します。

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);​
于 2012-05-25T18:16:17.430 に答える
8

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

var bigString = [
    'some long text here',
    'more long text here',
    '...'
];
$('#accordion_container').append(bigString.join(''));
于 2012-05-25T18:21:06.990 に答える
8

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

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

var multiStr = "This is the first line \
This is the second line \
This is more...";
于 2015-02-25T11:18:43.857 に答える
8

もう 1 つの選択肢は、バックティックを使用したテンプレート リテラルです。

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

于 2015-11-17T18:37:49.167 に答える
2

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

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

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

  3. "`" (バックティック、グラブ アクセント) を使用します。余分な操作は必要ありません。このメソッドは ES2015/ES6 (テンプレート リテラル) からサポートされています。

  4. tag必要な同じ HTML コードを含むhidden を追加します。たとえば<p id="foo" style="display:none;">、 を使用します.append($('#foo').html());。

    次に、いくつかの使用シナリオを上記に投稿します(ブラウザー first three methodsのコンソールで実行するだけです)。Chromeここに画像の説明を入力

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

于 2019-02-24T07:11:50.103 に答える
1

このように $(#element).append( large_html),large_html を特殊文字 (``) で追加するだけで、後でお礼を言うことができます。

于 2018-11-21T12:32:58.117 に答える
0

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

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

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

$('.accordion_container').forEach(function () {
    this.innerHTML += large;​
});
于 2014-10-17T12:20:14.607 に答える