Добавление большого блока html с append()

Я пытаюсь добавить большой блок текста, используя 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, который я пытаюсь добавить?

ОТВЕТЫ

Ответ 1

Удалите разрывы строк.

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);​

Ответ 2

Javascript не имеет многострочных строк в том, как вы их пишете, вы не можете просто открыть строку на одной строке, спуститесь по нескольким строкам, а затем закройте ее. (есть несколько способов делать многострочные строки в 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>`;

Ответ 3

Вы должны создать шаблон в HTML, который скрыт, а затем добавить его содержимое HTML. Например:

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

JQuery:

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

Поместить HTML-код в строку JavaScript сложнее для чтения и поиска, он подвержен ошибкам, и ваша IDE будет пытаться правильно отформатировать его.

Обновление 2019

Проверьте тег template, который был создан для этой цели: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

template даже разрешено содержать недопустимый HTML-код, например тэг td вне table.

Ответ 4

Я понимаю, что если вы хотите поместить свою длинную строку на несколько строк, более эффективно использовать массив строк и присоединиться к ним.

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

Ответ 5

Вы можете использовать обратную косую черту в конце каждой строки.

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

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

Ответ 7

В Javascript есть возможность расширить несколько строк/раздел HTML в одну строку, для каждой строки строки HTML добавьте обратную косую черту(), чтобы определить, что это строка продолжения.

Примечание: -The нужно учитывать только то, что в строках добавления есть одинарные и двойные кавычки. Если вы начинаете с одинарной кавычки, то используйте двойную кавычку во внутренней строке или наоборот, в противном случае строка разрывается и не дает правильного результата.

$(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> \
');

Или вы можете использовать шаблон HTML для этого, как упоминание в 3-й ссылке через jquery

$("#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/

Добавление нескольких HTML-элементов с использованием Jquery

распространять HTML в несколько строк JavaScript

Ответ 8

Вы также можете клонировать div с помощью jQuery, а затем добавить клон-путь менее беспорядочно.

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

Ответ 9

Если разрывы строк являются проблемой, просто используйте innerHTML, работает в каждом браузере с IE5:

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

Или, для коллекций:

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

Ответ 10

просто добавьте вот так ($ element).append(large_html), large_html специальным символом ('') и поблагодарите меня позже.

Ответ 11

По умолчанию HTML-код, содержащий переносы, нельзя использовать с append/prepend предварительным append/prepend непосредственно с помощью 'or". Однако в настоящее время для этого есть следующие методы:

  1. Используйте "+", чтобы соединить фрагменты кода HTML.

  2. Используйте "\", чтобы убежать.

  3. Используйте "" (обратный тик, серьезный акцент), не нужно никаких дополнительных операций. Этот метод поддерживается в ES2015/ES6 (литералы шаблонов).

  4. Добавьте скрытый tag содержащий тот же HTML-код, который вам нужен, например, <p id="foo" style="display:none;">, затем используйте .append($('#foo').html()); ,

    Теперь опубликуйте некоторые сценарии использования для first three methods упомянутых выше (просто запустите их в консоли браузера Chrome.): enter image description here

Мы можем ясно видеть их различия.